我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
这可以通过多种方式实现。
如上所述，在返回之前，存储数组中的所有元素回路内部回路方法1：让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）/*** 1. 所有循环生成的元素都需要密钥* 2. 数组中只能放置一个父元素*例如container.push(*＜div key＝｛index｝＞值</div>＜div＞这将引发错误</div>)**/});返回(＜div＞<div>这里有任何东西</div>＜div＞｛container｝＜/div＞</div>)方法2：返回(＜div＞<div>这里有任何东西</div>＜div＞{(() => {让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）});返回容器；})()}</div></div>)
其他回答
它循环通过一组数据，为数据集中的每个项目创建一个新的React组件。这可以使用JavaScript的map（）方法实现。
例如，如果您有一个称为“data”的对象数组和一个名为“ObjectRow”的React组件：
const rows = data.map((item, index) => <ObjectRow key={index} {...item} />);
然后，可以像这样渲染tbody标记中的行：
<tbody>{rows}</tbody>
您可以在React for循环中使用.map（）。
<tbody>
{ newArray.map(() => <ObjectRow />) }
</tbody>
只需使用带有ES6语法的map Array方法：
<tbody>
{items.map(item => <ObjectRow key={item.id} name={item.name} />)}
</tbody>
不要忘记密钥属性。
如果没有键值par，则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
以下是您可以在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>
