[解決済み] React JSX内のループ

質問

React JSXで以下のようなことをやろうとしています（ObjectRowは別コンポーネントです）。

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

JSXは関数呼び出しにマッピングされるため、これが有効なJSXでないことは理解しています。しかし、テンプレートの世界から来て、JSXの初心者である私は、上記（コンポーネントを複数回追加する）をどのように達成するのかわかりません。

解決方法は？

JavaScriptの関数を呼び出しているだけだと考えてください。このとき for ループの中に、関数呼び出しの引数が入ることになります。

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

関数を参照してください。 tbody が渡されます。 for ループを引数にとると、シンタックスエラーが発生します。

しかし、配列を作り、それを引数として渡すことは可能です。

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

JSXを扱う場合も、基本的には同じ構造で大丈夫です。

var rows = [];
for (var 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の例がほぼそのまま変換されたものである。で遊んでみてください。 バベルREPL を使えば、JSXがどのように動くかを知ることができます。