React - 处理长链嵌套回调

Question

处理从子级到父级的冒泡信息的反应方式是通过回调。

（示例来源：react.js 用于与父节点通信的自定义事件。）

然而，一段时间后这可能会变得非常麻烦，例如

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

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

这种情况发生的频率比我想象的要高，因为 React 强烈推荐使用小组件。

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

Answer 1

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

但是，当你遇到孙子需要向他的曾祖父母通报某事的情况时，那么你建立的联系可能不利于发展过程。

在这些情况下，我认为这个大...孩子应该通过商店（redux）或商店（flux）与祖...父母进行通信。最终根据上下文。

可能您在架构方面遇到了一些问题，并且您必须稍微扁平化您的组件？我认为正确的结构不应该有冒泡信息的问题，因为只有父级应该对其子组件事件感兴趣。然后父母应该处理信息并将处理结果告知父母，而不仅仅是传递来自孩子的信息。

例如我们有：

1. 输入组件&按钮组件
2. 表单组件
3. 页面组件

现在：

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

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