javascript - 将状态传递给子组件 - React 教程

Question

我一直在关注官方 React 教程 here .我已经达到这样的程度:当我单击一个方 block 时，它会调用 Board 的 handleClick 函数来更新方 block 状态。
但是，在 Board 类中更新状态后，它们不会向下传播到方 block 的状态。
这是我的代码:

 class Square extends React.Component {
   constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button className="square" onClick={() =>this.props.onClick()}  >
      {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  renderSquare(i) {
   return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />;
  }
  render() {
    const status = 'Next player: X';
    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>
    );
  }
    handleClick(i) {
  const squares = this.state.squares.slice();
  squares[i] = 'X';
      debugger;
  this.setState({squares: squares});
}
}

https://codepen.io/mohamed3on/pen/jVVyWZ?editors=1010我一直严格按照教程进行操作，直到“为什么不可变性很重要”部分。我知道

Answer 1

您已经将每个方 block 的值作为属性传递，但您正试图从 Square.render() 中的状态中获取它。您应该使用 {this.props.value}，并在构造函数中丢失状态初始化，您不需要它。一般模式是:容器组件管理状态；那么包含的组件应该是无状态的。作为一般准则，还建议始终避免使用状态。