我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
ES2015 Array.from,带有map函数+键
如果对.map()没有任何内容,可以使用Array.from()和map函数来重复元素:
<tbody>
{Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>
其他回答
如果numrows是一个数组,那么最好的方法就是map方法。如果不是,并且您只能从JSX访问它,您也可以使用以下ES6方法:
<tbody>
{
[...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
}
</tbody>
您只能在JSX元素中编写JavaScript表达式,因此for循环无法工作。您可以先将元素转换为数组,然后使用map函数渲染它:
<tbody>
{[...new Array(numrows)].map((e) => (
<ObjectRow/>
))}
</tbody>
我不确定这是否适用于您的情况,但通常[map][1]是一个很好的答案。
如果这是使用for循环的代码:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用map函数这样写:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
objects.map是进行循环的最佳方式,objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法(它返回布尔值)。
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} />
使用地图功能。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>