我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
如果您真的想在JSX中使用for循环，可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
其他回答
<tbody>
numrows.map((row,index) => (
return <ObjectRow key={index}/>
)
</tbody>
在渲染或任何函数中，在返回之前，可以使用变量来存储JSX元素。就像这样-
const tbodyContent = [];
for (let i=0; i < numrows; i++) {
tbodyContent.push(<ObjectRow/>);
}
在身体内部使用它，如下所示：
<tbody>
{
tbodyContent
}
</tbody>
但我更喜欢map（）而不是这个。
我见过一个人/以前的答案在数组中使用.contat（），但不是这样。。。
我已经使用concat添加到字符串中，然后通过jQuery选择器在元素上呈现JSX内容：
let list = "<div><ul>";
for (let i=0; i<myArray.length; i++) {
list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}
list = list.concat("</ul></div>);
$("#myItem").html(list);
如果您真的想在JSX中使用for循环，可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
如果选择在render方法的return（）内部转换此值，最简单的方法就是使用map（）方法。使用Map（）函数将数组映射到JSX语法，如下所示（使用ES6语法）。
在父组件内部：
<tbody>
{ objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>
请注意，key属性已添加到子组件中。如果没有提供密钥属性，您可以在控制台上看到以下警告。
警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。
注意：人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式，您可以在这里阅读有关它的更多信息。简而言之，如果它不是一个静态列表，就不要使用索引作为键。
现在，在ObjectRow组件中，可以从对象的财产访问该对象。
在ObjectRow组件内部
const { object } = this.props
Or
const object = this.props.object
这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在，您可以根据您的目的吐出该对象中的值。
参考文献：
JavaScript中的map（）方法
ECMAScript 6或ES6
