AngularワールドのようなReactの "$ emit"とは

Question

Angularでは、祖先に通知するために$ scope。$ emitメソッドを使用できます。どのようにして同じことをReactで行うことができますか？

Answer 1

些細な解決策は、親から子へのコールバックを孫などに渡すことです。降下がコールバックを呼び出すと、それは親のコンテキストで実行されます。

class Parent extends React.Component { 
 
    constructor() { 
 
    this.click = this.click.bind(this); // bind the handler to this 
 
    } 
 
    
 
    click(view) { 
 
    this.setState({ view }); // change the state 
 
    } 
 
    
 
    render() { 
 
    return <Child clickHandler={ this.click } />; // pass CB to child 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    render() { 
 
    return <GrandChild clickHandler={ this.props.clickHandler } />; // pass CB to grandChild 
 
    } 
 
} 
 

 
class GrandChild extends React.Component { 
 
    render() { 
 
    return <button onClick={() => this.props.clickHandler('nextViewId') }>Click</button>; // invoke CB on click 
 
    } 
 
}

問題は、コンポーネントの大きな木を持っている場合、あなたは複数のレベルに複数のコールバックを転送する必要がありますということです。つまり、すべてのコンテナに複数のプロパティを持たせることができ、CBを通過させるだけで、テストとメンテナンスが非常に難しくなります。小さなアプリケーションにはこのソリューションを使用してください。

大規模なアプリケーションの場合は、reduxなどのFluxアーキテクチャを使用する必要があります。大まかなアイデアは、すべてのアクションが起動コンポーネントによってディスパッチされ、メインストアによって処理され、新しいモデルを作成し、それをコンポーネントツリーのルートに転送することです。このようにして、すべてのコンポーネントは必要なすべてのデータを取得し、それを処理できます。これは、ルートへのAngularの$ブロードキャストの使用のようなものです。