如何在 React 中更新父母的状态？

Question

我的结构如下所示：

Component 1

 - |- Component 2

 - - |- Component 4

 - - -  |- Component 5

Component 3

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

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

原文由 Wojciech Kulma 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

这样，孩子可以通过调用道具传递的函数来更新父母的状态。

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

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

原文由 Ivan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是使用新的 useState 挂钩的方法。

方法 - 将状态转换器函数作为 props 传递给子组件，并用该函数做任何你想做的事情：

 import React, {useState} from 'react';

const ParentComponent = () => {
  const[state, setState]=useState('');

  return(
    <ChildComponent stateChanger={setState} />
  )
}

const ChildComponent = ({stateChanger, ...rest}) => {
  return(
    <button onClick={() => stateChanger('New data')}></button>
  )
}

原文由 moshfiqrony 发布，翻译遵循 CC BY-SA 4.0 许可协议