我试图在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元素。就像这样-
const tbodyContent = [];
for (let i=0; i < numrows; i++) {
tbodyContent.push(<ObjectRow/>);
}
在身体内部使用它,如下所示:
<tbody>
{
tbodyContent
}
</tbody>
但我更喜欢map()而不是这个。
其他回答
只需执行以下操作:
<tbody>{new Array(numRows).fill(“”,0,numRows”).map((p,i)=><YourRaw key={i}/>)}</tbody>
有几个答案指向使用map语句。下面是一个完整的示例,它使用FeatureList组件中的迭代器基于一个称为features的JSON数据结构列出Feature组件。
const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
<div className="feature-list">
{features.map(feature =>
<Feature
key={feature.id}
{...feature}
onClickFeature={() => onClickFeature(feature.id)}
onClickLikes={() => onClickLikes(feature.id)}
/>
)}
</div>
);
您可以在GitHub上查看完整的FeatureList代码。此处列出了特征夹具。
我不确定这是否适用于您的情况,但通常[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是检查数组是否满足给定条件的最佳方法(它返回布尔值)。
有趣的是,人们如何使用更新的语法或不常见的方法来创建数组,从而给出“创造性”的答案。在我使用JSX的经验中,我见过这些技巧,只有经验不足的React程序员才会使用。
解决方案越简单,对未来的维护人员就越好。由于React是一个web框架,通常这种类型的(表)数据来自API。因此,最简单和最实用的方法是:
const tableRows = [
{id: 1, title: 'row1'},
{id: 2, title: 'row2'},
{id: 3, title: 'row3'}
]; // Data from the API (domain-driven names would be better of course)
...
return (
tableRows.map(row => <ObjectRow key={row.id} {...row} />)
);
如果您真的想在JSX中使用for循环,可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>