井字游戏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（）中单独定义了所有按钮。它定义了什么，还有其他解决方法吗？

解决方法

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

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