React JSX の内部ループ

Question

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

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

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

Answer 1

これがあなたのケースに適切かどうかはわかりませんが、通常は map が適切な答えです。

これが for ループを使用するコードの場合:

リーリー

map を使用して を次のように記述できます:

リーリー

ES6 構文:

リーリー

Answer 2

JavaScript 関数を呼び出しているだけであると考えてください。 for ループを使用して関数呼び出しに引数を渡すことはできません:

リーリー

関数 tbody がパラメーターとして for ループにどのように渡されるか、構文エラーが発生するかを確認してください。

ただし、配列を作成してパラメータとして渡すこともできます。

リーリー

---

JSX を使用する場合は、基本的に同じ構造を使用します:

リーリー

ちなみに、私の JavaScript の例は、JSX の例とほぼ同じものを変換します。 Babel REPL を使用して、JSX がどのように動作するかを感じてみてください。