☰

React JSX内のループ 質問する

tag-icon • tag-icon javascript reactjs jsx
React JSX内のループ 質問する

React JSX で次のようなことを実行しようとしています (ObjectRow は別のコンポーネントです)。

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

JSX は関数呼び出しにマップされるため、これが有効な JSX ではない理由は理解しています。ただし、テンプレートの世界から来て JSX を初めて使用するため、上記 (コンポーネントを複数回追加する) をどのように実現するかはわかりません。

ベストアンサー1

forJavaScript 関数を呼び出すだけのように考えてください。関数呼び出しの引数が渡される場所にループを使用することはできません。

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

tbody関数にループが引数として渡されfor、構文エラーが発生する仕組みを確認します。

ただし、配列を作成し、それを引数として渡すことはできます。

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

JSX を使用する場合も基本的に同じ構造を使用できます。

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

ちなみに、私のJavaScriptの例は、JSXの例が変換したものとほぼ同じです。バベルREPLJSX がどのように動作するかを把握します。

おすすめ記事