我试图在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时可能需要设置关键点属性。它不能通过函数调用传入。
更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。
其他回答
我不确定这是否适用于您的情况，但通常地图是一个很好的答案。
如果这是使用for循环的代码：
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用地图这样写：
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6语法：
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
您可以尝试新的for of循环：
const apple = {
color: 'red',
size: 'medium',
weight: 12,
sugar: 10
}
for (const prop of apple.entries()){
console.log(prop);
}
以下是几个示例：
以下是您可以在React中通过迭代对象数组或普通数组实现的可能解决方案
const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
rows.push(<ObjectRow key={data.id} name={data.name}/>);
});
<tbody>
{ rows }
</tbody>
Or
const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
rows.push(<ObjectRow key={numrows[i]} />);
};
<tbody>
{ rows }
</tbody>
最近几天，我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map，可以返回也可以不返回：
.map带返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> {
return <ObjectRow key={data.id} name={data.name}/>
})}
</tbody>
.map不返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> (
<ObjectRow key={data.id} name={data.name}/>
))}
</tbody>
您可以从numRows创建数组并映射它
像这样的东西：
<tbody>
{Array.from({ length: numrows }).map((_,i)=><ObjectRow key={i}/>)
</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>
);
