React双重循环渲染棋盘

1.非循环渲染（写死）

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

​

2.双重循环渲染（map循环）

render() {
        const row = [ 0, 1, 2 ];
        const col = [ 0, 1, 2 ];
        return (
            <div>
                {row.map((e, index1) =>
                    <div key={e} className="board-row">
                        {
                            col.map((f, index2) =>
                                this.renderSquare(3 * index1 + index2)
                            )
                        }
                    </div>
                )}
            </div>
        );
    }

 

注意事项

1.map循环里的元素需要设置key属性

2.循环渲染html元素时=》后面不要用花括号{}