在映射中包含JSX内容可能是笨拙的语法。相反，您可以这样做：

const ObjectRow = ({ ... }) => <tr key={}>...</tr>

const TableBody = ({ objects }) => {
  return <tbody>{objects.map(ObjectRow)}</tbody>;
}

这是

{ objects.map(object => ObjectRow(object))

如果将ObjectRow设置为使用对象中的相同键，这将非常有用。

注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。

更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。

你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。

它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-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，因此您可以遵循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的渲染方法。看见“链接”了解更多信息。

由于您在JSX代码中编写JavaScript语法，因此需要将JavaScript代码包装在大括号中。

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}
</tbody>

我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。

所以我可能会做一些类似的事情：

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

诚然，这是一个很小的代码量，内联它可能会很好。