井字游戏ReactJs中的数组

时间:2020-10-21 11:10:16

标签: reactjs

class Board extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

 
 handleClick(i) {

    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {

    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

    return (
      <div>
        <div className="status">{status}</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>
    );
  }
}

在此组件状态下,“正方形”是九个空元素组成的数组。我不明白它指的是什么,因为我们已经在renderSquare()中单独定义了所有按钮。它定义了什么,还有其他解决方法吗?

1 个答案:

答案 0 :(得分:0)

此示例中的state.squares数组表示板上的当前值。 您所指的按钮将显示为<Square>元素,该元素会在该状态下为该特定索引显示值。

state.squares数组被初始化为null个元素的数组,因为只有在按下X按钮时,该值才设置为O<Square>。点击。