es6 for looping looping하지 않습니다.

Question

저는 간단한 ES6 for-loop 작동을 얻으려고합니다.하지만 왜 실행되지 않는지 알아낼 수 없습니다.

나는 developer.mozilla 워드 프로세서에서 예제를 복사했고 아래의 에스 플러 버전으로 시도했다 :
또한 let i = 0; 위. 모든 렌더링/로그는 i = 0이고 증가하지 않습니다. eslint 버전은 여기에 있습니다 : eslint site

for (i = 0; i < 10; i += 1) { 
    console.log('i', i); 
    return <p>component {i}</p>; 
    } 

편집 : 확인 난 = 0, I = 1 등 ... 그러나 구성 요소 각각에 그들을 다시 로그에 오는 값을 얻을했기 때문에? 배열 및 맵핑을 통해 구성 요소를 꺼내려고했지만 오류가 발생하지 않으며 아무 것도 나타나지 않습니다. 다만 값을 얻으려고해도 마찬가지입니다.

const nbPageArray = []; 
    let i = 0; 
    for (i = 0; i < nbPages; i += 1) { 
    console.log('i', i); 
    nbPageArray.push(<p>component {i}</p>); 
    } 
    console.log('array', nbPageArray); 
    nbPageArray.map(a => <p>{a.type}</p>); 
} 

최종 작업 버전 :

const nbPageArray = []; 
for (let i = 0; i < nbPages; i += 1) { 
    nbPageArray.push({ page: i + 1 }); 
} 
return nbPageArray.map(a => 
    <li className="page-item"><a className="page-link">{a.page}</a></li>, 
); 

Answer 1

홈페이지 문제가해야i += 10;

입니다1 += 1;

,

그리고 당신은 요소의 배열을 반환해야합니다

var p_tags = []; 
for (i = 0; i < 10; i += 1) { 
    console.log('i', i); 
    p_tags.push(<p>component {i}</p>); 
} 
return p_tags; 

---

편집 질문의 대답 :

첫 번째 오류 :

const nbPageArray = [];var nbPageArray = [];

둘째 당신은 배열을 반환하지 않습니다해야한다 이렇게 코드를 변경하십시오

return nbPageArray.map(a => <p>{a.type}</p>); 

Answer 2

만약 당신이 한 후 루프를 종료합니다 귀하의 루프를 들어, 현재 함수를 종료합니다, 당신은 또한 10 각 여행에서 나는를 증가하는에서 당신 return 어느쪽으로 든.

당신이 i 열 배의 값으로 문자열을 인쇄 할 경우에 당신은과 같이 템플릿 문자열을 사용하여 시도 할 수 :

for (i = 0; i < 10; i += 1) { 
    console.log('i', i); 
    console.log(`<p>component ${i}</p>`); 
} 

Answer 3

당신이 루프에서 돌아도 10 루프 의지에 의해 증가된다 한 번만 실행하십시오.

Answer 4

의견에서 언급했듯이 for 루프 내부의 return은 첫 번째 반복에서 함수에서 종료됩니다.

이 대신 같은 것을 할 수 있습니다

const result = Array(10).fill().map((_, i) => 
    <p>component {i}</p> 
); 

또는

const result = [...Array(10)].map((_, i) => 
    <p>component {i}</p> 
);