React 渲染中的嵌套 for 循环

Question

该网站告诉我有很多类似的问题，但我只是找不到我正在寻找的答案。我相信这对于反应专业人士来说应该是一件容易的事，因为我是一名初学者。

我在函数中有这段代码render：

return (
  
  <div>
    <div className="board-row">
      {this.renderSquare(0)}
      {this.renderSquare(1)}
      {this.renderSquare(2)}
    </div>
    <div className="board-row">
      {this.renderSquare(3)}
      {this.renderSquare(4)}
      {this.renderSquare(5)}
    </div>
    <div className="board-row">
      {this.renderSquare(6)}
      {this.renderSquare(7)}
      {this.renderSquare(8)}
    </div>
  </div>
);  

我想使用两个嵌套循环重写它，我能想到的就是这个（不起作用，我尝试纠正错误，但这只会给我带来新的错误）：

return (
  <div>
   {for (let j = 0; j < 3; j++) {
      <div className="board-row">
       {for (let k = 0; k < 3; k++) {
         {this.renderSquare((j*3) + k)}
       }}
      </div>
   }}
  </div>

）；

我如何重写这段代码？

Answer 1

有很多解决方法可以使其工作，就像这样

我的建议是有一个好的数据结构。

const board = [
 [ 1, 2, 3 ],
 [ 4, 5, 6 ],
 [ 7, 8, 9 ]
]

return (
  <div>
   {board.map((row, i) => (
      <div key={i} className="board-row">
       {row.map(square => renderSquare(square))}
      </div> 
   ))}
  </div>
)

并且不能在 render 方法中使用for 循环。你应该用.map它。

每当你渲染元素数组时，不要忘记keys。

阅读更多：https://reactjs.org/docs/lists-and-keys.html#keys