如何将事件冒泡到最顶级的父级 React 样式？

Question

我有一组组件app->page->list_container->list->item 我的目标是通知app 点击发生在item 级别。 如果有像parent->child 这样的简单关系，我可以使用道具并执行以下操作：<Child onClick={this._onClick}> ...，然后使用this.props.onClick() 进行回调。
但是，对于使用组件树执行相同的技巧，最好的原生 React 风格的收据是什么？如何通知app，item 被点击而不调用 Flux/Reflux、Elm 和其他支持的库？

Answer 1

标准反应方式：
将onClick 函数作为组件树的支柱传递是标准的反应方式。

在<app>:

<page onClick={this._onClick}>

在<page>:

<list_container onClick={this.props.onClick}>

等等。

或者你可以使用：

<list_container {...this.props}>

自动将任何 prop 从父组件传递到子组件。

在深树中，这可以而且将会变得非常乏味/大量的工作。 React 不是为此目的而设计的。
React 是为（自上而下）智能和快速的组件树渲染而设计的。
您提到的通量模式框架旨在处理其他交互功能。

替代快捷方式（不推荐）： 您可以使用的一种快捷方式是直接在 DOM 上添加一个侦听器，在您的 <app> 组件内，它处理项目上的点击事件：

在<app>组件中，添加：

componentDidMount: function() {
  var itemElementInDOM = document.getElementById('myItem');
  itemElementInDOM.addEventListener('click',this._onClick);
}

在您的 <item> 组件中，为项目指定一个（唯一的）ID。

我一般不会推荐这个：

• 在典型的反应树设置中，较低级别的组件（如 <item>) 可能会多次渲染，然后你需要 附加逻辑以确保每个 ID 都是唯一的。
• 你也会 需要添加一些额外的智能以确保您删除侦听器 相关项目已从 DOM 中移除。