React JSX循环只有第二个孩子

Question

我有一个类似的JSX：

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

我怎么能单独迭代<tr> 10次？

Answer 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>
  );
}

Answer 2

一个简单的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。如果您需要更多信息，请务必查看。

Answer 3

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