我试图在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>)
其他回答
假设您所在的州有一系列项目：
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
您的JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在JavaScript中，不能多次调用函数来收集返回的变量。
这是非法的，唯一的方法是使用数组来存储函数返回的变量。
或者您可以使用Array.prototype.map来处理这种情况，Array.prototype.map自JavaScriptES5以来就可用。
也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数，就像Angular的ng repeat一样。
想象一下，你只是在调用JavaScript函数。不能在函数调用的参数所在的位置使用for循环：
return tbody(
for (let i = 0; i < numrows; i++) {
ObjectRow()
}
)
看看函数tbody是如何作为参数传递给for循环的——导致语法错误。
但您可以创建一个数组，然后将其作为参数传入：
const rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
使用JSX时，基本上可以使用相同的结构：
const rows = [];
for (let i = 0; i < numrows; i++) {
// note: we are adding a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
顺便说一下，我的JavaScript示例几乎与JSX的示例完全相同。玩Babel REPL，了解JSX的工作原理。
我用它就像
<tbody>
{ numrows ? (
numrows.map(obj => { return <ObjectRow /> })
) : null
}
</tbody>
也许是当今最大开发者的标准，使用这样的结构：
let data = [
{
id: 1,
name: "name1"
},
{
id: 2,
name: "name2"
},
{
id: 3,
name: "name3"
},
{
id: 100,
name: "another name"
}
];
export const Row = data => {
return (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.name}</td>
</tr>
);
};
function App() {
return (
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>{data.map(item => Row(item))}</tbody>
</table>
);
}
在JSX中，在HTML或任何代码中编写JavaScript操作，｛data.map（item=>Row（item））｝，在map函数中使用单花括号。了解更多地图信息。
这里还可以看到以下输出。
