我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
要循环多次并返回,可以通过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>
其他回答
甚至这段代码也能完成同样的工作。
<tbody>
{array.map(i =>
<ObjectRow key={i.id} name={i.name} />
)}
</tbody>
ES2015 Array.from,带有map函数+键
如果对.map()没有任何内容,可以使用Array.from()和map函数来重复元素:
<tbody>
{Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>
您可以尝试新的for of循环:
const apple = {
color: 'red',
size: 'medium',
weight: 12,
sugar: 10
}
for (const prop of apple.entries()){
console.log(prop);
}
以下是几个示例:
function PriceList({ self }) {
let p = 10000;
let rows = [];
for(let i=0; i<p; i=i+50) {
let r = i + 50;
rows.push(<Dropdown.Item key={i} onClick={() => self.setState({ searchPrice: `${i}-${r}` })}>{i}-{r} ₺</Dropdown.Item>);
}
return rows;
}
<PriceList self={this} />
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);