Question

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

Answer 1

标准反应方式：
将onClick函数作为支撑向下传递到组件树是执行此操作的标准反应方式。

在<app>：

<page onClick={this._onClick}>

在<page>：

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

等等。

或者您可以使用：

<list_container {...this.props}>

自动将父组件中的任何道具传递给子组件。

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

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

在<app>组件中，添加：

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

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

我一般不推荐这个：

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

如何将事件冒泡到最顶级的父React风格？

1 个答案: