以下のようなことを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 add 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の例が変換されたものとほぼ同じです。Babel REPL](https://babeljs.io/repl)で遊んでみて、JSXがどのように動作するかを感じてみてください。
これがあなたの状況に合うかどうかはわかりませんが、多くの場合、mapが良い答えとなります。
これがあなたのforループのコードだったら
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
map]1でこのように書くことができます。
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6の構文です。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
古いスレッドですが、React Templatesをチェックアウトしてみてはいかがでしょうか。これは、いくつかのディレクティブ(rt-repeatなど)を使って、reactでjsxスタイルのテンプレートを使えるようにするものです。
react-templatesを使用した場合の例は以下のようになります。
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>