Question

我正在尝试根据父级提供的道具更新子级。现在它的工作方式是父母的状态包含一个名为“ paused”的变量，该变量像这样提供给孩子：

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}
              />
            }
          />
        )
      }

孩子然后像这样使用它：

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

Paused是一个布尔值，上面的用法仅用于测试，因为我无法使其更新到想要的位置，所以行为是这样的。

已在父级而不是子级中更新暂停。我读过很多这样的问题，但我很茫然。

任何帮助将不胜感激。

Answer 1

根据您提供的代码，我似乎找不到与此相关的问题。这是工作证明。

如果ChildContainer有任何可能会干扰的逻辑，那么我可能是错的，但是照这样，这行得通：

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" />

父状态更改未更新子道具

1 个答案: