Question

我有<Left Child 2/>的状态，我希望传递给<Right Child 2/>。它们都有一个父（上面的一个），并引用相同的父容器。

结构是这样的：

     <ParentContainer />
        |            |
        |            |
        v            v
<Left Child 1/> <Right Child 1/>
        v            v
<Left Child 2/> <Right Child 2/>

如何在React中传递数据而不是一层，而是两层，然后将它从同一个Parent传递到另一棵树？

Answer 1

在父组件中添加函数和默认内部状态。然后将函数传递给<Left Child 2/>并调用函数，将函数设置为父组件的状态，您可以使用props传递给<Right Child 1/>。

这里的关键是为您的数据提供单一事实来源，这应该是父组件。

Answer 2

我对其他类似问题的回答也适用于您的情况。主要思想是将一个回调函数从父向下传递给多级子组件，然后何时以及如何从子组件触发该回调函数。

=====

随意阅读我的答案，这些答案并不复杂，我认为^^：

Force React container to refresh data（这是类似的问题）

和

Re-initializing class on redirect（这是我的主要解释，这是一个关于如何通过多级孩子将回调函数作为道具传递以及如何触发它的演示）

=====

实际上，当父组件更新时，它的所有子组件也将更新！因此，正如上面的链接中所述，在你的情况下使用Flux或Redux将是一个很好的接近，这消除了通过多级子组件传递道具的复杂性

反应 - 我如何将状态两层传递给另一个孩子？

2 个答案: