我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
const numrows = [1, 2, 3, 4, 5];
cosnt renderRows = () => {
return numros.map((itm,index) => <td key={index}>{itm}</td>)
}
return <table>
............
<tr>
{renderRows()}
</tr>
</table>
其他回答
使用地图功能。
<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);
}
以下是几个示例：
如果没有键值par，则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
您可以创建如下新组件：
将键和数据传递给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>
);
}
以下是React文档中的一个示例，JavaScript表达式作为子项：
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
至于你的情况，我建议你这样写：
function render() {
return (
<tbody>
{numrows.map((roe, index) => <ObjectRow key={index} />)}
</tbody>
);
}
请注意，键非常重要，因为React使用键来区分数组中的数据。
