我有一个JSX:
<table>
<thead> value </thead>
<tr> values </tr>
</table>
如何单独迭代<tr>
10次?
答案 0 :(得分:1)
这是答案的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>
);
}
答案 1 :(得分:0)
一个简单的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>
我知道你不久前问了这个问题,并给了这个链接looping inside JSX。如果您需要更多信息,请务必查看。
答案 2 :(得分:0)
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中找到运行循环的几个示例,例如:loop inside React JSX