React JSX内部のループ

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

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

JSXは関数呼び出しに対応しているので、これが有効なJSXではないことは理解しています。しかし、テンプレートの世界から来て、JSX`の初心者である私は、どのようにして上記（コンポーネントを複数回追加する）を実現するのか分かりません。

ravibagul91
編集された質問 30日 5月 2019 в 9:51
プログラミング
javascript reactjs
5日 4月 2014 в 5:29
13 ビュー
ソリューション

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();
}
return <tbody>{rows}</tbody>;

ちなみに、私のJavaScriptの例は、JSXの例が変換されたものとほぼ同じです。Babel REPL](https://babeljs.io/repl)で遊んでみて、JSXがどのように動作するかを感じてみてください。

temporary_user_name
編集した答え 29日 1月 2019 в 1:21
解説 (18)

これがあなたの状況に合うかどうかはわかりませんが、多くの場合、mapが良い答えとなります。

これがあなたのforループのコードだったら

<tbody>
    for (var i=0; i < objects.length; i++) {

    } 
</tbody>

map]1でこのように書くことができます。

<tbody>
    {objects.map(function(object, i){
        return ;
    })}
</tbody>

ES6の構文です。

<tbody>
    {objects.map((object, i) => )}
</tbody>
Remco Haszing
編集した答え 5日 3月 2018 в 2:41
解説 (11)

古いスレッドですが、React Templatesをチェックアウトしてみてはいかがでしょうか。これは、いくつかのディレクティブ(rt-repeatなど)を使って、reactでjsxスタイルのテンプレートを使えるようにするものです。

react-templatesを使用した場合の例は以下のようになります。

<tbody>

</tbody>
Rich Warrior
編集した答え 14日 8月 2019 в 9:01
解説 (1)