React.jsの勉強中にちょっとハマったのでメモ。
タイトルのとおり、JSXでfor文のようなループ処理を書く方法を紹介する。
map関数を使ってループする
Reactコンポーネントのrender関数を例に、3回ループする処理を書いてみた。
01 02 03 04 05 06 07 08 09 10 11 12 13 | render() { return ( <div> { Array(3).fill( 'test' ).map((val, i) => { return ( <div>{val}, {i}</div> ); }) } </div> ); } |
上記の出力結果は以下のとおりとなる。
1 2 3 | test, 0 test, 1 test, 2 |
2重ループ処理
for文をネストした多重ループ処理も、マップ関数を使ってJSXでも同様の処理を行うことができる。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | render() { return ( <div> { Array(3).fill( 'test' ).map((val, i) => { return ( Array(3).fill(0).map((val2, j) => { return ( <div> {i}, {j} </div> ); }) ); }) } </div> ); } |
このrender関数の実行結果は以下のとおりとなる。
1 2 3 4 5 6 7 8 9 | 0, 0 0, 1 0, 2 1, 0 1, 1 1, 2 2, 0 2, 1 2, 2 |