javascript - 在React JSX中循环

我尝试在react中执行如下操作(其中objectrow是一个单独的组件):

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

我了解并理解为什么这是无效的,因为JSX映射到函数调用。但是,由于来自于Template Land并且刚接触过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一起玩,了解JSX的工作原理。