我试图在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 Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。
如果使用反应模板,您的示例如下:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
其他回答
如果您还没有像@FakeRainBrigand的答案那样的要映射()的数组,并且希望内联该数组,以使源布局与比@SophieAlpert的答案更接近的输出相对应:
使用ES2015(ES6)语法(扩展和箭头函数)
http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview
<tbody>
{[...Array(10)].map((x, i) =>
<ObjectRow key={i} />
)}
</tbody>
回复:使用Babel进行传输时,其警告页面显示Array.from是传播所必需的,但目前(v5.2.23)在传播实际的Array时似乎并非如此。我有一个文件问题需要澄清。但请自行承担风险或使用polyfill。
香草ES5
阵列应用
<tbody>
{Array.apply(0, Array(10)).map(function (x, i) {
return <ObjectRow key={i} />;
})}
</tbody>
内联IIFE
http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview
<tbody>
{(function (rows, i, len) {
while (++i <= len) {
rows.push(<ObjectRow key={i} />)
}
return rows;
})([], 0, 10)}
</tbody>
其他答案的技术组合
保持与输出相对应的源布局,但使内联部分更紧凑:
render: function () {
var rows = [], i = 0, len = 10;
while (++i <= len) rows.push(i);
return (
<tbody>
{rows.map(function (i) {
return <ObjectRow key={i} index={i} />;
})}
</tbody>
);
}
使用ES2015语法和数组方法
对于Array.prototype.fill,您可以这样做,作为使用如上所示的排列的替代方法:
<tbody>
{Array(10).fill(1).map((el, i) =>
<ObjectRow key={i} />
)}
</tbody>
(我认为你实际上可以省略fill()的任何参数,但我不是100%。)感谢@FakeRainBrigand在fill()解决方案的早期版本中纠正了我的错误(请参阅修订版)。
key
在所有情况下,关键属性都会减轻开发构建的警告,但在孩子中无法访问。如果希望子级中的索引可用,可以传递额外的属性。有关讨论,请参见列表和键。
使用地图功能。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel,可以考虑使用jsx控制语句。
它们需要一些设置,但我认为在可读性方面是值得的(特别是对于非React开发人员)。如果使用linter,还有eslint-plugin-jsx控制语句。
下面的代码将帮助您通过传递唯一的密钥道具在JSX中创建循环
import React, { Children, Fragment } from 'react';
export const ObjectRow = ({ data }) => (
<div>
<Fragment>{data}</Fragment>
</div>
);
/** Wrapping your list inside React.Children.toArray allows you to not
pass unique key props.
It will be dynamically generated from Virtual Dom to Real Dom */
export const ObjectRowListComponent = (objectRows) => (
<tbody>
{Children.toArray(objectRows.map((row) => <ObjectRow data={row} />))}
</tbody>
);
如果numrows是一个数组,那么最好的方法就是map方法。如果不是,并且您只能从JSX访问它,您也可以使用以下ES6方法:
<tbody>
{
[...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
}
</tbody>