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

Question

处理从 child 到 parent 的冒泡信息的 react 方式是通过回调。

(样本来源:react.js custom events for communicating with parent nodes .)

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

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

在这个例子中，为了让 GreatGrandParent 从 Child 获取信息，我们必须通过 Parent 和 GrandParent 冒泡。

这种情况比我想象的更频繁，因为 React 强烈推荐小组件。

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

Answer 1

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

但是当您遇到曾孙需要将某事告知他的曾曾祖 parent 的情况时，您已经建立了可能不利于发展过程的联系。

在那些情况下，我认为这个 grand ... child 应该通过 store (redux) 或 stores (flux) 与 grand ... parent 沟通。最终根据上下文。

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

例如我们有:

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

现在:

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

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