我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
它循环通过一组数据,为数据集中的每个项目创建一个新的React组件。这可以使用JavaScript的map()方法实现。
例如,如果您有一个称为“data”的对象数组和一个名为“ObjectRow”的React组件:
const rows = data.map((item, index) => <ObjectRow key={index} {...item} />);
然后,可以像这样渲染tbody标记中的行:
<tbody>{rows}</tbody>
其他回答
您可以执行以下操作:
let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}
随着时间的推移,语言越来越成熟,我们经常会遇到这样的常见问题。问题是循环组件“n”次。
{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}
其中,n-是要循环的次数。项将未定义,索引将照常。此外,ESLint不鼓励使用数组索引作为键。
但是,您的优点是不需要在之前初始化数组,最重要的是避免了for循环。。。
为了避免项目未定义带来的不便,您可以使用_,这样在进行linting时就会忽略它,并且不会引发任何linting错误,例如
{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}
请试试这个
<tbody>
{Array.apply(0, Array(numrows)).map(function (x, i) {
return <ObjectRow/>;
})}
</tbody>
or
{[...Array(numrows)].map((x, i) =>
<ObjectRow/>
)}
在JSX块中围绕JavaScript代码使用{},使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊,但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象,那么您将希望通过执行以下操作来实现这一目标:
<td>{item.someProperty}</td>
在这种情况下,您将希望用不同的td包围它,并以不同的方式排列前面的示例。
如果你真的想要一个for循环等价物(你有一个数字,而不是一个数组),只需使用Lodash中的范围。
不要重新发明轮子,不要混淆代码。只需使用标准实用程序库。
import range from 'lodash/range'
range(4);
// => [0, 1, 2, 3]
range(1, 5);
// => [1, 2, 3, 4]