1
現時点では、私はリアクションイベントを研究中で、イベントバブルとキャプチャに関する珍しい問題に気付きました。React Synthetic Eventsコンポーネントによるバブルキャプチャ
divタグのネストされたグループ（すべてonClick/onClickCapture）を使用すると、期待どおりに動作します。イベントは、DOMツリーの「上/下」をトリガします。
しかし、Divsの1つがReact.Componentである場合、イベントを捕捉しません。 これは、Reactがコンポーネントを常に「スタンドアロン」にする必要があるため、他のコンポーネントによって生成されたイベントを（ネストされている場合でも）処理するべきではないという考え方によるものだと思います。
誰でも私の考えに正しく当てはまるか教えていただけますか？
私はデモを作成しました。このデモでは、Component "Top"を標準divに置き換えると、バブルとキャプチャが予想どおりに行われます。
http://codepen.io/anon/pen/KNdBYW?editors=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"))