我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
甚至这段代码也能完成同样的工作。
<tbody>
{array.map(i =>
<ObjectRow key={i.id} name={i.name} />
)}
</tbody>
其他回答
在渲染或任何函数中，在返回之前，可以使用变量来存储JSX元素。就像这样-
const tbodyContent = [];
for (let i=0; i < numrows; i++) {
tbodyContent.push(<ObjectRow/>);
}
在身体内部使用它，如下所示：
<tbody>
{
tbodyContent
}
</tbody>
但我更喜欢map（）而不是这个。
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</tbody>;
}
诚然，这是一个很小的代码量，内联它可能会很好。
JSX内部有多种循环方式
使用for循环函数TableBodyForLoop（props）{常量行=[]；//创建数组以存储tr列表for（设i=0；i<props.people.length；i++）{const person=道具.人物[i]；//将tr推到数组，关键是行.推(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>);}//返回tbody内的行return<tbody>｛rows｝</tbody>；}使用ES6阵列映射方法函数TableBody（props）{返回(<tbody>{props.people.map（person=>(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>))}</tbody>);}
完整示例：https://codesandbox.io/s/cocky-meitner-yztif
以下React文档将有所帮助
列表和键条件渲染
由于您在JSX代码中编写JavaScript语法，因此需要将JavaScript代码包装在大括号中。
row = () => {
var rows = [];
for (let i = 0; i<numrows; i++) {
rows.push(<ObjectRow/>);
}
return rows;
}
<tbody>
{this.row()}
</tbody>
您还可以使用自调用函数：
return <tbody>
{(() => {
let row = []
for (var i = 0; i < numrows; i++) {
row.push(<ObjectRow key={i} />)
}
return row
})()}
</tbody>
