将状态传递给子组件 - 反应教程

Question

我一直在关注官方React Tutorial here。而且我已经达到了点击一个方块的程度，它调用了Board的handleClick函数来更新方块状态。
但是，在Board类中更新状态之后，它们不会传播到广场的状态。
这里是我的代码：

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

您已经将每个方块的值作为属性传递，但您试图从Square.render()的状态中提取它。你应该使用{this.props.value}，并在构造函数中失去状态初始化，你不需要它。一般模式是：容器组件管理状态;那么包含的组件应该是无状态的。作为一般指导原则，最好避免一直使用状态。