如何在使用react-router时从子组件设置父组件的状态？

问题描述：

我在一个阵营项目中，用户将被提示一系列问题的工作，这些问题的答案将被合并为对象进行保存。如何在使用react-router时从子组件设置父组件的状态？

父组件包含几个孩子。

为example--

<Route path="Parent" component={Parent}> 
 
    <Route path="Child1" component={Child1} /> 
 
    <Route path="Child2" component={Child2} /> 
 
    <Route path="Child3" component={Child3} /> 
 
    <IndexRoute component={Child1} /> 
 
</Route>

父将具有空值前的初始状态。（this.state = {value1：“”，value2：“”}）

使用{this.props.children时，如何将数据从孩子传递给父母（以及从父母到孩子的道具） }？

答

除了使用component道具使你的孩子的路线，使用render道具。这允许你有一个函数返回你想渲染的组件，而不是简单地接受这个类本身。它看起来像这样：

<Route path="Parent" component={Parent}> 
    <Route path="Child1" render={() => {<Child1 someProp={foo} />}} /> 
    <Route path="Child2" render={() => {<Child2 someProp={bar} />}} /> 
    <Route path="Child3" render={() => {<Child3 someProp={baz} />}} /> 
    <IndexRoute component={Child1} /> 
</Route>

为什么要这样呢？那么，正如你所看到的，现在你可以将道具传递给渲染的孩子（在这个例子中，someProp）。而现在，你可以通过道具的孩子，这是微不足道的use callbacks to modify parent state from the children.

More info on the render prop here.

太好了。请考虑不要使用'state'并将实现移到''''''''''''''''''''''如' – Hitmands

对于反应路由器v4，这是一个首选的方式，只要确保使用渲染而不是组件来避免额外的安装和重新渲染。 –

正是我在找的，谢谢！ –

答

为了让父母摆脱其子回数据，你需要传递一个回调函数作为一个属性给孩子。

callbackFunction(data) { 
    // do something 
} 

<ChildComponent parentCallback={this.callbackFunction} />

然后你可以使用道具的子组件内将数据发送回给其父，然后将使用回调函数来用它做什么。

const x = ["a", "b", "c", "d"]; 
this.props.parentCallback(x);

检查下面的文章了解详情：https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

另一种选择是使用像Redux的状态容器。在这种情况下，您的子组件会将值分派给某个状态，并且此状态正由其父级监听，并在状态更改时重新呈现。这是更复杂场景的解决方案

如何在使用react-router时从子组件设置父组件的状态？

相关推荐