Javascript React：通过嵌套组件冒泡的事件

假设我有这样的嵌套组件：

<root />
  <comp1 />
    <comp2 />
      <target id={this.props.id}>
        <div>click me</div>

是否需要手动设置链中每个组件的属性，如React教程示例中所示

点击我

---

或者有什么方法可以像在普通DOM中那样将事件冒泡出来？

您可以使用速记将道具传递给子组件

<Component {...this.props} more="values" />

因此，在你的情况下：

<root />
  <comp1 clickHandler={this.action}/>
    <comp2 {...this.props} />
      <target {...this.props} id={this.props.id} />
        <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div>

点击我

React在捕获和冒泡阶段都支持虚拟DOM中的合成事件（如下所述：）

这意味着您可以在根附近的任何DOM元素上放置onClick处理程序，它应该触发页面上的所有单击事件：

<root>
  <div onClick={this.handleAllClickEvents}>
    <comp1>
      <comp2>
        <target>
          <div id={this.props.id}>click me</div>

这种类型的事件委派实际上是React在幕后所做的（）所以你必须问问自己，这是否是你真正想要做的

---

或者，您可能希望查看类似Flux（）中的Dispatcher模式。开始时有点复杂，但总的来说，这是一个更好的解决方案。

如果您想区分最后单击了哪个元素，您可以使用事件对象并在其中找到一些有趣的内容，例如DOM元素类型

<AnElement>
 <button onClick={e => this.eventHandler(e)}>Click me</button>
 <input type="text" onClick={e => this.eventHandler(e)}>Click me</input>

eventHandler = (e) => {
        console.log(e, e.nativeEvent.toElement.nodeName);
...}

希望它有帮助
我以为你不应该改变道具？«对于页面上的所有点击事件»更确切地说，对于所有子体（内部节点）。虽然{…this.props}有效，但在维护了一个包含数百个组件的项目后，很难对传递下来的组件进行推理，这会让人无法跟踪。@Patrick您可以试试。它引入了一个概念
选择器
，它允许您从全局数据存储中选择道具，而不是从parentThx传递道具，redux用于全局状态，而且它不是问题的所在。我只是特别指出，当nestedI使用的时间不长时，spread操作符充其量是令人困惑的，所以对此持保留态度，但如果您试图解耦组件并重用它们，这对我来说似乎是一种反模式。这种模式使它们依赖于具有特定命名属性的父对象的子对象
<root>
  <div onClick={this.handleAllClickEvents}>
    <comp1>
      <comp2>
        <target>
          <div id={this.props.id}>click me</div>

function handleAllClickEvents(event) {
  var target = event.relatedTarget;
  var targetId = target.id;
  switch(targetId) {
    case 'myBtn1':
      // handle myBtn1 click event
    case 'myBtn2':
      // handle myBtn2 click event
  }
}

<AnElement>
 <button onClick={e => this.eventHandler(e)}>Click me</button>
 <input type="text" onClick={e => this.eventHandler(e)}>Click me</input>

eventHandler = (e) => {
        console.log(e, e.nativeEvent.toElement.nodeName);
...}