在没有外部库的情况下，子组件如何在 React 中更新父组件的状态？

React 中的父子状态管理

在 React 应用程序中，您可能会遇到子组件需要更新父组件状态的场景。虽然 props 默认情况下是不可变的，但有一些方法可以在不使用 Redux 等外部库的情况下实现此功能。

解决方案

对于子-父级通信，您可以使用作为 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} />;
  }
}

在这种情况下：

• Parent 将处理函数作为 prop 传递给 Child。
• 当单击 Child 中的按钮时，它调用处理函数。
• Parent 中的处理函数更新了 someVar 状态父级。

替代解决方案

如果您正在处理不相关的组件（例如示例中的组件 5 和组件 3），您可以重组组件：

• 创建一个新的更高级别组件，其中包含两个组件（组件 1 和组件3).
• 将状态从较高级别的组件作为 props 传递给较低级别​​的组件。

这种方法可以让你有效地管理不相关组件之间的状态，而无需依赖中间状态共享机制。

以上是在没有外部库的情况下，子组件如何在 React 中更新父组件的状态？的详细内容。更多信息请关注PHP中文网其他相关文章！