ハンドルReception event delegation with stopPropagation（）

Question

ReactにはどのWebサイトにも配置できるプロジェクトがあります。アイデアは、私はjavascriptファイルをホストし、人々は特定のIDを持つdivを配置し、そのdivのReactレンダリングを行います。

これまでのところ、クリックイベントを除いてこれが機能します。これらの値はhandled at the top levelです。これはすべて役に立ちますが、アプリを配置するサイトの1つにオフキャンバスメニュー用にstopPropagation()が実装されています。このため、イベントは正常に動作していません。

私はルート要素で全てのイベントをキャッチし、それらを手動でディスパッチ試してみました：イベントはすでに派遣されているため、

this.refs.wrapper.addEventListener('click', (event) => { 
    console.log(event); 
    console.log(event.type); 
    const evt = event || window.event; 
    evt.preventDefault(); 
    evt.stopImmediatePropagation(); 
    if (evt.stopPropagation) evt.stopPropagation(); 
    if (evt.cancelBubble !== null) evt.cancelBubble = true; 
    document.dispatchEvent(event); 
}); 

これは動作しません：

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

この問題を解決する正しい方法は何でしょうか？ Reactの合成イベントを使用していないので、私のために行く正しい方法ではありません。

Answer 1

引数 'event h'はすでにディスパッチされています。 新しいイベントオブジェクトを古いイベントで複製する必要があります。

var newevent = new event.constructor(event.type, event) 

Answer 2

Therはまだ解決策ではありません。あなたが言っているように、DOMのルートでイベントを聴いて、event.targetが反応のマウントされたノード内になければイベントをフィルタリングします。
試すことができます：
1. Reractコンポーネントで新しいイベントを再ディスパッチしますが、ハンドラの外側でも停止します。
2. Reractコンポーネントの外側に新しいイベントを送信します（より高い（最も近いのはBODY）、次にstopPropagationコールバックを持つノード）。しかし、event.targetは、Reactのコンポーネント内にはないノードを指し、それは読み取り専用であるため、変更することはできません。
多分次のバージョンでは修正されるでしょう。

Answer 3

しかし、ドキュメント内のイベントを聞くことはできますか？

アプリ全体のルートコンポーネントの名前はappとしましょう。次に、内部にcomponentDidMountがあります。

// when the main App component mounts - we'll add the event handlers .. 
componentDidMount() { 

    var appComponent = this; 

    document.addEventListener('click', function(e) { 

     var clickedElement = e.target; 

     // Do something with the clickedElement - by ID or class .. 
     // You'll have reference to the top level component in `appComponent` .. 

    }); 
};