React元素是简单的JavaScript，因此您可以遵循JavaScript的规则。您可以在JavaScript中使用for循环，如下所示：-

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

但有效且最好的方法是使用.map函数。如下所示：-

<tbody>
    {listObject.map(function(listObject, i){
        return <ObjectRow key={i} />;
    })}
</tbody>

在这里，有一件事是必要的：定义密钥。否则，它将发出如下警告：-

Warning.js:36警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。检查ComponentName的渲染方法。看见“链接”了解更多信息。

只需执行以下操作：

<tbody>｛new Array（numRows）.fill（“”，0，numRows”）.map（（p，i）=>＜YourRaw key＝｛i｝/>）｝</tbody>

在渲染或任何函数中，在返回之前，可以使用变量来存储JSX元素。就像这样-

const tbodyContent = [];
for (let i=0; i < numrows; i++) {
    tbodyContent.push(<ObjectRow/>);
}

在身体内部使用它，如下所示：

<tbody>
    {
        tbodyContent
    }
</tbody>

但我更喜欢map（）而不是这个。

不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：

function renderObjectRow (){
   for (var i=0; i < numrows; i++) {
       return  <ObjectRow/>
     } 
}

<tbody>
{renderObjectRow()}
</tbody>

您可以在React for循环中使用.map（）。

<tbody>
    { newArray.map(() => <ObjectRow />) }
</tbody>

想象一下，你只是在调用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的工作原理。