父状态更改不更新子道具

Question

I'm trying to update a child based on the props provided by it's parent. The way it works right now is that the parent's state contains a variable called 'paused' which is provided to the child like this:

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      history: this.props.history,
      paused: false,
    }
  }
    render() {
        let paused = this.state.paused
        return (
          <ChildContainer
            graph={
              <Child
                paused={paused}
              />
            }
          />
        )
      }

Child then uses it like this:

render() {
    return (
          <div>
            {'paused:' + this.props.paused}
          </div>
    )
  }

Paused is a boolean, the usage above is just for testing, since I couldn't get it to update where I want, the behaviour is the same like this.

Paused is being updated in the parent, but not the child. I've read a lot of questions like this, but I'm at a loss.

Any help would be greatly appreciated.

Answer 1

I can't seem to find a problem with this based on the code you've provided. Here is working proof.

If ChildContainer has any logic that could interfere then I could be wrong, but as is, this works:

 class Parent extends React.Component { constructor(props) { super(props) this.state = { history: this.props.history, paused: false, } } render() { let paused = this.state.paused // I agree with @Kuo-hsuan Hsu this is unnecessary return ( <ChildContainer toggle={() => this.setState({ paused: !this.state.paused })} graph={<Child paused={paused}/>} /> ) } } class ChildContainer extends React.Component { render() { return ( <div> {this.props.graph} <button onClick={this.props.toggle}>Toggle</button> </div> ); } } class Child extends React.Component { render() { return ( <div>{'paused:' + this.props.paused}</div> ) } } ReactDOM.render(<Parent />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />