Reactの他の多くのコンポーネントでコンポーネントメソッドを呼び出す正しい方法は何ですか？

Question

私はReact with Meteorを使用しています。私は現在、かなりの数のコンポーネントを持つように成長したアプリケーションを構築しています（5つ以上のレベルのようにかなり深く入れ子になっています）。

私はしばしば自分自身はこのように、単に最上位の親でレンダリングされたコンポーネントのためのコンポーネントメソッドを呼び出すために、親から子供へのすべての方法を小道具に合格する必要が見つける：

親ファイル

openDialog() { 
    this.setState({ open: true }); 
} 

render() { 
    return (
    <div> 
     <Dialog open={ this.state.open } /> 
     <ChildComponent openDialog={ this.openDialog.bind(this) } /> 
    </div> 
); 
} 

ChildComponent

render() { 
    return (
    <div> 
     <GrandChildComponent openDialog={ this.props.openDialog } /> 
    </div> 
); 
} 

など、最上位の親で定義されたopenDialogメソッドを呼び出すだけです。

---

これは、1つのブランチがさらに内側に向かっている場合にのみ機能します。しかし、サイトのさまざまな部分（ヘッダー、サイドバー、インラインリンクなど）からトリガできるログインモーダルダイアログボックスがある場合は、必要な可能性のあるすべてのコンポーネントにこのように小道具を渡すことは明らかに実行不可能ですリンク（またはリンクされていない）

この種の問題を処理する正しい方法（推奨）は何ですか？

Answer 1

一般的な解決方法は、コンポーネントを外部アクションセットと外部State Managerにリンクすることです。それにはFluxアーキテクチャが使用されます。 Reduxのようないくつかのフレームワークは、Reactとの統合に役立ちます。

フラックスを使用すると、コンポーネントのツリー全体を渡すことなく、すべてのコンポーネントからアクション（たとえばopenDialog）を送信できます。