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

Question

我有一组组件 app->page->list_container->list->item我的目标是通知 app该点击发生在 item等级。如果有像 parent->child 这样的简单关系我可以使用 Prop 并做类似的事情:<Child onClick={this._onClick}> ...然后使用 this.props.onClick()进行回调。
但是，用组件树执行相同技巧的最佳原生 React 风格收据是什么？如何通知app , 那item在没有调用 Flux/Reflux、Elm 和其他支持的库的情况下被点击？

Answer 1

标准 react 方式:
路过onClick作为组件树的支柱是执行此操作的标准 react 方式。

在<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。

我一般不会推荐这个:

• 在典型的 react 树设置中，较低级别的组件(如 <item> ) 可能会被渲染不止一次，然后你需要附加逻辑以确保每个 ID 都是唯一的。
• 你也会需要添加一些额外的智能以确保在有问题的项目已从 DOM 中删除。