我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
有多种方法可以做到这一点。JSX最终会被编译成JavaScript,所以只要你编写了有效的JavaScript,你就会很好。
我的回答旨在巩固这里已经介绍的所有精彩方式:
如果没有对象数组,只需输入行数:
在返回块中,创建一个Array并使用Array.prototype.map:
render() {
return (
<tbody>
{Array(numrows).fill(null).map((value, index) => (
<ObjectRow key={index}>
))}
</tbody>
);
}
在返回块之外,只需使用普通的JavaScript for循环:
render() {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式:
render() {
return (
<tbody>
{(() => {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return rows;
})()}
</tbody>
);
}
如果您有一个对象数组
在返回块中,.map()将每个对象映射到<ObjectRow>组件:
render() {
return (
<tbody>
{objectRows.map((row, index) => (
<ObjectRow key={index} data={row} />
))}
</tbody>
);
}
在返回块之外,只需使用普通的JavaScript for循环:
render() {
let rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式:
render() {
return (
<tbody>
{(() => {
const rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return rows;
})()}
</tbody>
);
}
其他回答
只需执行以下操作:
<tbody>{new Array(numRows).fill(“”,0,numRows”).map((p,i)=><YourRaw key={i}/>)}</tbody>
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);
这里有一个简单的解决方案。
var Object_rows = [];
for (var i = 0; i < numrows; i++) {
Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;
不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。
要循环多次并返回,可以通过from和map实现:
<tbody>
{
Array.from(Array(i)).map(() => <ObjectRow />)
}
</tbody>
其中i=次数
如果您想为渲染组件分配唯一的键ID,可以使用React文档中建议的React.Children.toArray
对阵列进行反应
将子级不透明数据结构作为平面数组返回,并为每个子级分配键。如果要在渲染方法中处理子对象的集合,特别是如果要在传递之前对this.props.children进行重新排序或切片,则非常有用。
注:React.Children.toArray()在展平子列表时更改键以保留嵌套数组的语义。也就是说,toArray在返回的数组中给每个键加前缀,以便每个元素的键都被限定到包含它的输入数组中。
<tbody>
{
React.Children.toArray(
Array.from(Array(i)).map(() => <ObjectRow />)
)
}
</tbody>
您还可以使用自调用函数:
return <tbody>
{(() => {
let row = []
for (var i = 0; i < numrows; i++) {
row.push(<ObjectRow key={i} />)
}
return row
})()}
</tbody>