如何在不使用 Redux 的情况下从 React 中的嵌套子组件更新父组件的状态？

在不使用 Redux 的情况下更新 React 中的父级状态

许多开发人员遇到了在嵌套组件之间通信状态的挑战。当子组件需要更新更高级别父组件的状态时，会出现一种常见情况。这会成为问题，因为 React 规定 props 是不可变的。

考虑以下组件结构：

Component 1
  - Component 2
    - Component 4
      - Component 5
Component 3

在这种情况下，组件 3 需要访问组件 5 中存储的状态。直观地将组件 5 的状态作为 prop 传递给组件 1，并将其转发给其他组件。然而，React 的不变性规则禁止这种方法。

解决此问题的一种方法是使用父组件提供的函数来实现子父通信。考虑以下代码片段：

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

在此示例中，父组件提供的处理函数作为 prop 传递给子组件。当子组件中的按钮被点击时，它会调用处理函数，更新父组件的状态。

需要注意的是，该解决方案需要重构组件层次结构以确保组件之间的逻辑关系。在给定的示例中，组件 5 和组件 3 可能不直接相关。因此，可能有必要创建一个包含它们的新组件，以便有效地管理状态。

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