我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
试试这个
<tbody>
{new Array(numrows).map((row,index)=><ObjectRow key={***someThingUniqe***}/>)} //don't use index as key
</tbody>
如果您想知道为什么不应该在react中使用索引作为键，请检查此项
其他回答
只需执行以下操作：
<tbody>｛new Array（numRows）.fill（“”，0，numRows”）.map（（p，i）=>＜YourRaw key＝｛i｝/>）｝</tbody>
有多种方法可以做到这一点。JSX最终会被编译成JavaScript，所以只要你编写了有效的JavaScript，你就会很好。
我的回答旨在巩固这里已经介绍的所有精彩方式：
如果没有对象数组，只需输入行数：
在返回块中，创建一个Array并使用Array.prototype.map：
render() {
return (
<tbody>
{Array(numrows).fill(null).map((value, index) => (
<ObjectRow key={index}>
))}
</tbody>
);
}
在返回块之外，只需使用普通的JavaScript for循环：
render() {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式：
render() {
return (
<tbody>
{(() => {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return rows;
})()}
</tbody>
);
}
如果您有一个对象数组
在返回块中，.map（）将每个对象映射到<ObjectRow>组件：
render() {
return (
<tbody>
{objectRows.map((row, index) => (
<ObjectRow key={index} data={row} />
))}
</tbody>
);
}
在返回块之外，只需使用普通的JavaScript for循环：
render() {
let rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式：
render() {
return (
<tbody>
{(() => {
const rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return rows;
})()}
</tbody>
);
}
要循环多次并返回，可以通过from和map实现：
<tbody>
{
Array.from(Array(i)).map(() => <ObjectRow />)
}
</tbody>
其中i=次数
如果您想为渲染组件分配唯一的键ID，可以使用React文档中建议的React.Children.toArray
对阵列进行反应
将子级不透明数据结构作为平面数组返回，并为每个子级分配键。如果要在渲染方法中处理子对象的集合，特别是如果要在传递之前对this.props.children进行重新排序或切片，则非常有用。
注：React.Children.toArray（）在展平子列表时更改键以保留嵌套数组的语义。也就是说，toArray在返回的数组中给每个键加前缀，以便每个元素的键都被限定到包含它的输入数组中。
<tbody>
{
React.Children.toArray(
Array.from(Array(i)).map(() => <ObjectRow />)
)
}
</tbody>
以下是您可以在React中通过迭代对象数组或普通数组实现的可能解决方案
const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
rows.push(<ObjectRow key={data.id} name={data.name}/>);
});
<tbody>
{ rows }
</tbody>
Or
const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
rows.push(<ObjectRow key={numrows[i]} />);
};
<tbody>
{ rows }
</tbody>
最近几天，我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map，可以返回也可以不返回：
.map带返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> {
return <ObjectRow key={data.id} name={data.name}/>
})}
</tbody>
.map不返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> (
<ObjectRow key={data.id} name={data.name}/>
))}
</tbody>
@jacefarm如果我理解正确，您可以使用以下代码：
<tbody>
{ new Array(numrows).fill(<ObjectRow/>) }
</tbody>
您可以使用以下代码：
<tbody>
{ new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) }
</tbody>
还有这个：
<tbody>
new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>
