Javascript React-处理嵌套回调的长链

处理从子级向父级冒泡的信息的方法是通过回调

（样本来源：）

但是，这可能会在一段时间后变得非常麻烦，例如

Child = (props) => <div onClick={props.callback}/>
Parent = (props) => <Child callback={props.callback}/>
GrandParent = (props) => <Parent callback={props.callback}/>
GreatGrandParent = (props) => <GreatGrandParent callback={props.callback}/>

Child=（道具）=>
家长=（道具）=>
祖父母=（道具）=>
曾祖父母=（道具）=>

在这个例子中，为了让曾祖父母从孩子身上获取信息，我们必须通过父母和祖父母来获取信息

这种情况比我想象的更频繁，因为React强烈建议使用小型组件

---

注意：我想触发的实际事件不仅仅是简单的点击，我意识到在本例中我可以只听祖父母的点击事件，但它更复杂。基本上只是想从孩子那里向祖父母收集一些数据。

小型解耦组件的想法是开发应用程序更容易。当组件没有任何硬绑定/关系时，您只需在需要的地方使用这些组件，而无需构建关系上下文

但当你们们遇到这样的情况，孙子需要把一些事情告诉他的祖父母，那个么你们们就建立了一些关系，这可能对发展过程不利

在这种情况下，我认为这很重要。。。孩子应该和大人交流。。。按存储（redux）或存储（flux）排序的父级。最终是根据上下文

可能您在架构方面有一些问题，您需要稍微展平您的组件？ 我认为正确的结构不应该有冒泡信息的问题，因为只有父级应该对其子组件事件感兴趣。然后，家长应该处理信息并将处理结果告知家长，而不仅仅是从孩子那里传递信息

例如，我们有：

输入组件和按钮组件

表单组件

页面组件

现在：

• 当我们键入要输入的内容时，它会将键入的数据通知表单组件
• 但表单组件不必通知页面组件（页面组件对输入的字母不感兴趣）
• 当用户单击按钮时，按钮组件将通知表单（页面组件对按钮单击事件不感兴趣）
• 但当表单获取有关按钮单击的信息时，它会验证从输入接收到的数据，并将这些数据提交给服务器
• 提交事件对页面组件很重要，因此表单只将此信息发送到页面

---

在我的示例中，我们不应该在输入和页面之间建立通信。

您使用过flux或redux吗？是的，这实际上是在使用redux。然而，我对redux的理解是，每个路由都有一个连接到redux的“容器”，它使用从其初始状态派生的道具实例化所有其他哑组件。因此，让孩子成为容器似乎是一种反模式，但也许我错了？