javascript - 如何在 React 中更新 parent 的状态？

Question

我的结构如下:

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

组件 3 应根据组件 5 的状态显示一些数据。

由于 props 是不可变的，我不能简单地将其状态保存在 Component 1 中并转发它，对吗？是的，我读过 Redux ，但我不想使用它。我希望可以通过 react 来解决它。我错了吗？

Answer 1

对于子-父通信，您应该传递一个函数来设置从父到子的状态，像这样

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

这样， child 可以通过调用 props 传递的函数来更新 parent 的状态。

但您必须重新考虑组件的结构，因为据我了解，组件 5 和 3 不相关。

一种可能的解决方案是将它们包装在更高级别的组件中，该组件将包含组件 1 和 3 的状态。该组件将通过 props 设置较低级别的状态。