如何停止为调度 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

可以传入onClickevent和trigger stopPropagation()

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

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

如何停止为调度 redux 操作的嵌套组件冒泡？

How can I stop event bubbling for nested components dispatching a redux action?

javascript

event-bubbling

reactjs

redux