如何在React中更新父状态？

Question

如何在React中更新父状态？

我的结构如下：

Component 1  

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5  Component 3

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

Answer 1

对于子父通信，您应该传递一个函数，将状态从父级设置为子级，就像这样class&nbsp;Parent&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props) &nbsp;&nbsp;&nbsp;&nbsp;this.handler&nbsp;=&nbsp;this.handler.bind(this) &nbsp;&nbsp;} &nbsp;&nbsp;handler(someValue)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.setState({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;someVar:&nbsp;someValue&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;} &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Child&nbsp;handler&nbsp;=&nbsp;{this.handler}&nbsp;/> &nbsp;&nbsp;}}class&nbsp;Child&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Button&nbsp;onClick&nbsp;=&nbsp;{this.props.handler}/&nbsp;> &nbsp;&nbsp;}}这样，孩子可以通过调用带有props传递的函数来更新父级的状态。但是你必须重新考虑组件的结构，因为据我所知，组件5和3不相关。一种可能的解决方案是将它们包装在更高级别的组件中，该组件将包含组件1和3的状态。该组件将通过props设置较低级别的状态。

Answer 2

我发现以下工作解决方案将onClick函数参数从child传递给父组件：传递方法的版本（）//ChildB&nbsp;componentclass&nbsp;ChildB&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handleToUpdate&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this.props.handleToUpdate; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div><button&nbsp;onClick={()&nbsp;=>&nbsp;handleToUpdate('someVar')}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Push&nbsp;me&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>) &nbsp;&nbsp;&nbsp;&nbsp;}}//ParentA&nbsp;componentclass&nbsp;ParentA&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handleToUpdate&nbsp;&nbsp;=&nbsp;this.handleToUpdate.bind(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;arg1&nbsp;=&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;handleToUpdate(someArg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('We&nbsp;pass&nbsp;argument&nbsp;from&nbsp;Child&nbsp;to&nbsp;Parent:&nbsp;'&nbsp;+&nbsp;someArg); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({arg1:someArg}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handleToUpdate&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this.handleToUpdate; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ChildB&nbsp;handleToUpdate&nbsp;=&nbsp;{handleToUpdate.bind(this)}&nbsp;/></div>) &nbsp;&nbsp;&nbsp;&nbsp;}}if(document.querySelector("#demo")){ &nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ParentA&nbsp;/>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector("#demo") &nbsp;&nbsp;&nbsp;&nbsp;);}看看JSFIDDLE传递箭头功能的版本//ChildB&nbsp;componentclass&nbsp;ChildB&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handleToUpdate&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;this.props.handleToUpdate; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;onClick={()&nbsp;=>&nbsp;handleToUpdate('someVar')}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Push&nbsp;me&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>) &nbsp;&nbsp;&nbsp;&nbsp;}}//ParentA&nbsp;componentclass&nbsp;ParentA&nbsp;extends&nbsp;React.Component&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;handleToUpdate&nbsp;=&nbsp;(someArg)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('We&nbsp;pass&nbsp;argument&nbsp;from&nbsp;Child&nbsp;to&nbsp;Parent:&nbsp;'&nbsp;+&nbsp;someArg); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ChildB&nbsp;handleToUpdate&nbsp;=&nbsp;{this.handleToUpdate}&nbsp;/></div>) &nbsp;&nbsp;&nbsp;&nbsp;}}if(document.querySelector("#demo")){ &nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ParentA&nbsp;/>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector("#demo") &nbsp;&nbsp;&nbsp;&nbsp;);}看看JSFIDDLE