es6 forループがループしていない

Question

私は単純なES6 forループの作業をしようとしていますが、なぜそれが動作していないのか理解できません。

私はdeveloper.mozillaドキュメントのサンプルをコピーしました。また、以下のeslinterバージョンで試してみました：
また、let i = 0;上記。レンダリングする/ログはすべてi = 0であり、インクリメントしません。 eslint site

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

編集： eslint版はこちら[OK]の値は、I = 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

場合は、1の後にループを終了しますので、あなたがループのため、あなたは現在の関数を終了します、あなたはまた、10それぞれの旅で私をインクリメントしているから、あなたreturnいずれかの方法で丸めます。

あなたはi 10倍の値を持つ文字列を印刷しようとしている場合は、そのようにテンプレート文字列を使用して試みることができる：

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> 
);