如何在React中更新父状态

小编典典

如何在React中更新父状态

javascript

我的结构如下所示：

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

组件3应该根据组件5的状态显示一些数据。由于道具是不可变的，我不能简单地将其状态保存在组件1中并转发它，对吗？是的，我已经阅读了有关redux的内容，但不想使用它。我希望有可能通过反应来解决。我错了吗？

阅读 257

2020-04-25

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

  }

}

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

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

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

2020-04-25