React JSX循环只是第二个子循环

我有一个类似JSX的：

<table>
<thead> value </thead>
<tr> values </tr>
</table>

如何单独迭代<tr>10次？

这是es6版本的答案。

render () {
const values = [1, 2, 3, 4, 5];
return (
<table>
<thead></thead>
{values.map((item) =>  {
return (
<tr key={item}>
<td>{item}</td>
</tr>
);
})}
</table>
);
}

一个简单的for循环将完成：

renderTableRow() {
let trs = []
for(let i = 0; i < 10; i++) {
trs.push((<tr>{this.props.listOfItems[i]}</tr>))
}
return trs
}

在表格中，它可以看起来像这样：

<table>
<thead></thead>
{this.renderTableRow()}
</table>

我知道你不久前问了这个问题，并得到了这个链接，在JSX中循环。如果您需要更多信息，请务必查看。

React允许您使用大括号在JSX中运行JavaScript函数。您可以编写一个JavaScript函数，在该函数中返回一个<tr>数组(JSX将正确呈现该数组)。或者，可能更可取的是，您可以将要显示的值保存在数组中，并在JSX中使用map()函数。例如：

render() {
const values = [1, 2, 3, 4, 5];
return (
<table>
<thead></thead>
{values.map(function(currValue){
return (
<tr key={currValue}>
<td>{currValue}</td>
</tr>
);
})}
</table>
);
}

您可以找到几个在JSX中运行循环的例子，例如：React JSX 中的循环

相关内容

最新更新

热门标签：