在 React Js 中实现两个 for 循环来创建 tic-tac-toe 的 3X3 方形矩阵框

Question

我正在关注官方网站上的 React Js 教程，该教程帮助我们构建了一个井字棋游戏。方框是通过对所有方框进行硬编码来创建的，如下所示：

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

Answer 2

您不需要使用通常的for循环，因为它们看起来很混乱。相反，您应该利用新的 ES6 功能和语法来实现更清晰、更易于理解的方法。

下面的解决方案可以很好地渲染 3x3 井字游戏板：

import chunk from 'lodash/chunk';

const styles = { width: '40px', height: '40px', float: 'left', textAlign: 'center' };

return (

        <div className="tic-tac-toe-container">
            {chunk(new Array(9).fill(0), 3).map((item, itemIndex) => {
                return (
                    <div key={itemIndex} className="row">
                        {item.map(col => <div className="col" style={styles}>COL</div>)}
                    </div>
                )
            })
            }
        </div>
    );