React合成事件气泡捕获与组件

Question

我现在正在研究React Events，我注意到一个关于事件气泡和捕获的不寻常问题。

如果我有一组嵌套的div标签，所有的都有自己的onClick/onClickCapture，那么这就像预期的那样工作。事件触发DOM树的"上下"。

但是，如果其中一个div是React。组件时，它将不会捕获事件。我相信这是经过设计的，React采取的立场是组件应该始终是"独立的"，因此，不应该处理由其他组件引发的事件(即使它们是嵌套的)。

谁能告诉我我的想法是否正确?

我已经创建了一个演示。在演示中，如果你用一个标准的div替换组件"Top"，它会像预期的那样冒泡并捕获。

http://codepen.io/anon/pen/KNdBYW?编辑= 0010

const Top = (props) => (
  <div id="A" onClick={props.bubbleA} onClickCapture={props.captureA}>
    {props.children}
  </div>
)
const App = (props) => (
  <Top>A:Top Event
    <div id="B" onClick={props.bubbleB} onClickCapture={props.captureB}>B:I Propagate
      <div id="C" onClick={props.bubbleC} onClickCapture={props.captureC}>C:Don't Propagate
      </div>
    </div>
 </Top>
)
const props = {
  bubbleA: (e) => alert("bubble:A Target:" + e.target.id),
  captureA: (e) => alert("Capture:A Target:" + e.target.id),
  bubbleB: (e) => alert("bubble:B Target:" + e.target.id),
  captureB: (e) => alert("Capture:B Target:" + e.target.id),
  bubbleC: (e) => alert("bubble:C Target:" + e.target.id),
  captureC: (e) => alert("Capture:C Target:" + e.target.id)
}
ReactDOM
  .render(<App {...props} />, 
  document.getElementById("app"))

Answer 1

我算出来了!有个bug。我没有向Top组件传递任何道具，因此没有调用事件。我需要以下内容。这是一个愚蠢的错误，但在重构时很容易做到。

<Top {...props}>