react.js DOM要素を親のメインコンポーネントで利用できるようにする

Question

コンポーネント階層でかなり深くネストされた特定のDOM要素でclickイベント（おそらくEventTarget.dispatchEvent（）を使用）を実行する必要があります。上位の親Appコンポーネントからこれらのクリックイベントをトリガーする必要があります。

これにどのようにアプローチしますか？私は深く入れ子にされているので、これらのコンポーネントのそれぞれにコールバック関数を渡す必要はありません。 DOM要素を親/ Appコンポーネントにグローバルに利用できるようにしていますか？

Answer 1

の3つのオプション：

1. のリアクトコンテキストと機能を下に渡します。
2. 子コンポーネントをAppコンポーネントレンダリングに移動し、this.props.childrenを使用してAppの入れ子の子コンポーネントの1つにレンダリングします。
3. 子コンポーネントにクリックイベントロジックを近づけ、アプリケーションがアクセスできるグローバル状態を更新するためにRedux/Fluxを使用します（関数をグローバル状態に渡すことができますが、これはシリアライズ可能ではないため推奨しません）。 ）。

オプション1は最も簡単ですが、お手伝いができる場合はコンテキストを使用することはお勧めしません。 オプション2は使用できない可能性があります。 おそらくオプション3が必要です。