我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
在映射中包含JSX内容可能是笨拙的语法。相反，您可以这样做：
const ObjectRow = ({ ... }) => <tr key={}>...</tr>
const TableBody = ({ objects }) => {
return <tbody>{objects.map(ObjectRow)}</tbody>;
}
这是
{ objects.map(object => ObjectRow(object))
如果将ObjectRow设置为使用对象中的相同键，这将非常有用。
注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。
更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。
其他回答
您可能需要签出React Templates，它允许您在React中使用JSX样式的模板，并带有一些指令（例如rt repeat）。
如果使用反应模板，您的示例如下：
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
您可以创建如下新组件：
将键和数据传递给ObjectRow组件，如下所示：
export const ObjectRow = ({key,data}) => {
return (
<div>
...
</div>
);
}
创建新组件ObjectRowList，使其充当数据的容器：
export const ObjectRowList = (objectRows) => {
return (
<tbody>
{objectRows.map((row, index) => (
<ObjectRow key={index} data={row} />
))}
</tbody>
);
}
这是我迄今为止在大多数项目中使用的方法：
const length = 5;
...
<tbody>
{Array.from({ length }).map((_,i) => (
<ObjectRow key={i}/>
))}
</tbody>
您需要向数组中添加元素并渲染元素数组。这有助于减少重新渲染组件所需的时间。
下面是一些可能有用的粗略代码：
MyClass extends Component {
constructor() {
super(props)
this.state = { elements: [] }
}
render() {
return (<tbody>{this.state.elements}<tbody>)
}
add() {
/*
* The line below is a cheap way of adding to an array in the state.
* 1) Add <tr> to this.state.elements
* 2) Trigger a lifecycle update.
*/
this.setState({
elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
})
}
}
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
