我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
当我想添加一定数量的组件时，我使用助手函数。
定义一个返回JSX的函数：
const myExample = () => {
let myArray = []
for(let i = 0; i<5;i++) {
myArray.push(<MyComponent/>)
}
return myArray
}
//... in JSX
<tbody>
{myExample()}
</tbody>
其他回答
下面的代码将帮助您通过传递唯一的密钥道具在JSX中创建循环
import React, { Children, Fragment } from 'react';
export const ObjectRow = ({ data }) => (
<div>
<Fragment>{data}</Fragment>
</div>
);
/** Wrapping your list inside React.Children.toArray allows you to not
pass unique key props.
It will be dynamically generated from Virtual Dom to Real Dom */
export const ObjectRowListComponent = (objectRows) => (
<tbody>
{Children.toArray(objectRows.map((row) => <ObjectRow data={row} />))}
</tbody>
);
也可以在返回块外部提取：
render: function() {
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (<tbody>{rows}</tbody>);
}
在映射中包含JSX内容可能是笨拙的语法。相反，您可以这样做：
const ObjectRow = ({ ... }) => <tr key={}>...</tr>
const TableBody = ({ objects }) => {
return <tbody>{objects.map(ObjectRow)}</tbody>;
}
这是
{ objects.map(object => ObjectRow(object))
如果将ObjectRow设置为使用对象中的相同键，这将非常有用。
注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。
更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。
甚至这段代码也能完成同样的工作。
<tbody>
{array.map(i =>
<ObjectRow key={i.id} name={i.name} />
)}
</tbody>
有几个答案指向使用map语句。下面是一个完整的示例，它使用FeatureList组件中的迭代器基于一个称为features的JSON数据结构列出Feature组件。
const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
<div className="feature-list">
{features.map(feature =>
<Feature
key={feature.id}
{...feature}
onClickFeature={() => onClickFeature(feature.id)}
onClickLikes={() => onClickLikes(feature.id)}
/>
)}
</div>
);
您可以在GitHub上查看完整的FeatureList代码。此处列出了特征夹具。
