javascript - 在 React Js 中实现两个 for 循环以创建用于井字游戏的 3X3 方形矩阵框

Question

我正在关注官方网站上的 React Js 教程，该教程帮助我们构建 tic-tac-toe game .方框是通过硬编码所有方 block 创建的，如下所示:

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

我设法通过使用 for 循环来缩短代码，如下所示:

render(){
  let sqrRen = [];
  for(let i = 0; i < 9; i=i+3){
    sqrRen.push(<div className = "board-row">
      {this.renderSquare(0+i)}
      {this.renderSquare(1+i)}
      {this.renderSquare(2+i)} 
    </div>);
  }
  return (
    <div>
        {sqrRen}
    </div>
  );
}

但我还想使用另一个 for 循环在每一行中生成正方形，如下所示:

render(){
  let sqrRen = [];
  for(let i = 0; i < 9; i=i+3){
    sqrRen.push(<div className = "board-row">
      {
        for(let j=0;j<3;j++){
        this.renderSquare(j+i)
        }
      }
    </div>);
  }

  return (
    <div>
      {sqrRen}
    </div>
  );
}

但这行不通。我收到以下错误:

关于如何使用两个 for 循环有什么建议吗？

Answer 1

因为我也在寻找这个，所以接受的答案为我指明了正确的方向。虽然我在没有 lodash 的情况下做了一个稍微不同的实现。

render() {
  const rowCount = 3, colCount = 3;
  return (
    <div>
      {[...new Array(rowCount)].map((x, rowIndex) => {
        return (
          <div className="board-row" key={rowIndex}>
            {[...new Array(colCount)].map((y, colIndex) => this.renderSquare(rowIndex*colCount + colIndex) )}
          </div>
        )
      })
      }
    </div>
  );
}