React - 如何处理长串嵌套回调函数

Question

在React中，从子组件向父组件冒泡信息的方式是通过回调函数。

（示例来源：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}/>

在这个例子中，如果GreatGrandParent想从Child那里获取信息，我们必须通过Parent和GrandParent来冒泡传递信息。

这种情况比我想象的更常见，因为React强烈推荐使用小组件。

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

- Thariq Shihipar

---

你玩过Flux或Redux吗？ - dandavis

是的，实际上这使用了Redux。然而，我对Redux的理解是每个路由连接到一个“容器”，并且它通过初始状态派生出的属性来实例化所有其他无状态组件。所以将子组件作为容器似乎是一种反模式，但也许我弄错了？ - Thariq Shihipar

Answer 1

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

但是，当您有一个情况，即孙子需要通知他的祖父辈某些事情时，那么您就建立了可能不利于开发过程的连接。

在这些情况下，我认为这个孙...子应该通过存储（redux）或存储器（flux）与他的祖...父沟通。最终通过上下文。

可能您的架构存在问题，您需要稍微扁平化您的组件？ 我认为正确的结构不应该有冒泡信息的问题，因为只有父级应该对其子组件事件感兴趣。然后父母应该处理信息并通知他们的父母有关处理结果，而不仅仅是从孩子那里传递信息。

例如，我们有：

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

现在：

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

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

- Krzysztof Sztompka