我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
这是我迄今为止在大多数项目中使用的方法:
const length = 5;
...
<tbody>
{Array.from({ length }).map((_,i) => (
<ObjectRow key={i}/>
))}
</tbody>
其他回答
React元素是简单的JavaScript,因此您可以遵循JavaScript的规则。您可以在JavaScript中使用for循环,如下所示:-
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
但有效且最好的方法是使用.map函数。如下所示:-
<tbody>
{listObject.map(function(listObject, i){
return <ObjectRow key={i} />;
})}
</tbody>
在这里,有一件事是必要的:定义密钥。否则,它将发出如下警告:-
Warning.js:36警告:数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。检查ComponentName的渲染方法。看见“链接”了解更多信息。
如果您真的想在JSX中使用for循环,可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
您可以执行以下操作:
let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}
我找到了另一个解决方案提供:
<tbody>{this.getcontent()}</tbody>
还有一个单独的功能:
getcontent() {
const bodyarea = this.state.movies.map(movies => (
<tr key={movies._id}>
<td>{movies.title}</td>
<td>{movies.genre.name}</td>
<td>{movies.numberInStock}</td>
<td>{movies.publishDate}</td>
<td>
<button
onClick={this.deletMovie.bind(this, movies._id)}
className="btn btn-danger"
>
Delete
</button>
</td>
</tr>
));
return bodyarea;
}
这个例子很容易解决许多问题。
请试试这个
<tbody>
{Array.apply(0, Array(numrows)).map(function (x, i) {
return <ObjectRow/>;
})}
</tbody>
or
{[...Array(numrows)].map((x, i) =>
<ObjectRow/>
)}