如何在 React 中从子组件更新父组件的状态？

React 中的子父状态管理

在 React 中，维护组件层次结构中的状态可能具有挑战性，尤其是当父组件需要从子组件更新。提供的示例演示了父子组件结构，其中组件 3 需要根据组件 5 的状态显示数据。

虽然 props 通常是不可变的，但这并不意味着不可能从子组件更新父组件的状态。以下是实现它的方法：

将状态设置函数作为 props 从父级传递给子级。这允许子级在调用时更新父级的状态。

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

在此示例中，子级可以从父级访问处理函数。当单击子级中的按钮时，将调用处理程序，更新父级的状态。

但是，考虑组件结构很重要。就您而言，组件 5 和组件 3 没有直接相关。为了解决这个问题，您可以引入一个更高级别的组件来封装组件 1 和 3 的状态。然后，这个中间组件将为较低级别的组件提供必要的 props。

以上是如何在 React 中从子组件更新父组件的状态？的详细内容。更多信息请关注PHP中文网其他相关文章！