javascript - 如何停止嵌套组件分派(dispatch) redux 操作的事件冒泡？

Question

我动态渲染一堆嵌套组件，所有这些组件也附加到一个 redux 操作。

不幸的是，当我单击最里面的元素时，所有这些元素都会被调用该操作，在这种情况下我该怎么做才能阻止它冒泡？

示例代码:

  <div onClick={()=>this.props.anAction(elementName)}>{elementName}
      <div onClick={()=>this.props.anAction(innerElementName)}>{innerElementName}
        <div onClick={()=>this.props.anAction(innerInnerElementName)}>    
            {innerInnerElementName}
        </div>
     </div>
  </div>

Answer 1

可以传入onClick event和trigger stopPropagation()

<div onClick={(e)=>this.props.anAction(innerInnerElementName, e)}>    
   {innerInnerElementName}
</div>

anAction(el, ev) {
  ev.stopPropagation();
  ...
}