我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
请试试这个
<tbody>
{Array.apply(0, Array(numrows)).map(function (x, i) {
return <ObjectRow/>;
})}
</tbody>
or
{[...Array(numrows)].map((x, i) =>
<ObjectRow/>
)}
其他回答
React元素是简单的JavaScript，因此您可以遵循JavaScript的规则。您可以在JavaScript中使用for循环，如下所示：-
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
但有效且最好的方法是使用.map函数。如下所示：-
<tbody>
{listObject.map(function(listObject, i){
return <ObjectRow key={i} />;
})}
</tbody>
在这里，有一件事是必要的：定义密钥。否则，它将发出如下警告：-
Warning.js:36警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。检查ComponentName的渲染方法。看见“链接”了解更多信息。
JSX内部的循环非常简单。试试看：
return this.state.data.map((item, index) => (
<ComponentName key={index} data={item} />
));
const numrows = [1, 2, 3, 4, 5];
cosnt renderRows = () => {
return numros.map((itm,index) => <td key={index}>{itm}</td>)
}
return <table>
............
<tr>
{renderRows()}
</tr>
</table>
使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式，非常有效，也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法，而是首选的方法。
此外，不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引，但不建议使用生成的索引，但如果您的值是唯一的或存在唯一的键，则可以使用它们：
<tbody>
{numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>
此外，如果您不熟悉Array上的map函数，MDN中的几行代码：
map为数组，并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用，包括未定义的。对于缺少数组（即从未设置过的索引删除或从未被赋值）。回调是用三个参数调用的：元素的值，元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数，它将用作callback就是这个值。否则，未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组（尽管回调（如果调用）可能会这样做）。
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</tbody>;
}
诚然，这是一个很小的代码量，内联它可能会很好。
