2つの反応成分の間に状態を設定する適切な方法

Question

私はNavbarの成分とSidebarの成分を持っています。サイドバーコンポーネントには、オープンする必要があるかどうかを決定する状態変数があります。ここに私が持っているものがあります。

export default class Sidebar extends Component { 
    constructor() { 
    super(...arguments); 
    this.state = { open: false }; 
    } 
    toggle() { 
    this.setState({ open: !this.state.open }); 
    } 
    render() { 
    return (
     <LeftNav open={this.state.open}> 
     <MenuItem 
      onClick={this.toggle.bind(this)} 
      primaryText="Close" 
      leftIcon={<CloseIcon/>} 
     /> 
     </LeftNav> 
    ) 
    } 
} 

問題は、別のコンポーネントであるNavbarからトグル機能にアクセスすることです。

<AppBar 
    title="Navbar" 
    iconElementLeft={ 
    <IconButton onClick={}> // want to enable clicking here to close sidebar component 
     <MenuIcon> 
    </IconButton> 
    } 
/> 

個別のコンポーネントの状態を設定するベストプラクティスは何ですか？

Answer 1

あなたは "データフロー"というエキサイティングな領域に入りました。

これを実装する1つの方法は、イベントをリッスンし、情報を他のコンポーネントにディスパッチするある種の集中オブジェクトを持つことです。つまり、NavBarハンドラは、多くのフレームワークが参照するアクションをいくつかの情報で「アクション」としてディスパッチし、そのイベントからの情報に基づいて他のコンポーネントを再レンダリングすることができます。

この種のもののためにあらかじめパッケージ化されたソリューションを使用している場合、ライブラリの人気が高まっているのはreduxです。それ以外のものがあれば、他の人々が現在どのようにこのタイプのことをしているかについてのいくつかの洞察を得るのに役立ちます。