Question

我正在开展一个React项目，系统会向用户提示一系列问题，这些问题的答案将被合并为一个待保存的对象。

父组件包含多个子组件。

例如 -

<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}时，如何将数据从子项传递给父项（以及从父项到子项的道具）？

Answer 1

不使用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.

Answer 2

为了让父级从子级获取数据，您需要将回调函数作为属性传递给该子级。

<div class="box">
Text inside box
</div>

然后你可以使用子组件中的prop将数据发送回它的父级，然后父级将使用回调函数对它做一些事情。

callbackFunction(data) {
    // do something
}

<ChildComponent parentCallback={this.callbackFunction} />

查看以下文章了解更多详情：https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

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

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

2 个答案: