子コンポーネントの状態を設定するにはどうすればよいですか？

Question

私は、ボタンリストをレンダリングするコンポーネントを持っています。この 'ButtonList'を呼び出すことができます。いずれかのボタンをクリックすると、イベントはそのようにバブルアップされています。これに対応して

<ButtonList onButtonPressed={(mins) => { console.log(mins); }} /> 

、私はそのButtonListを隠し、現在非表示になっている別のコンポーネントを示したいと思います。 ButtonListには、 "state {visible：true}"のようないくつかの状態があり、これをレンダリングを停止するように切り替える必要があります。どのようにして、そのButtonListの状態を切り替える呼び出しを行い、このビュー内の他のコンポーネントを呼び出して、可視状態を表示するように切り替えることができますか？

ありがとうございました。

Answer 1

swappingComponentsExample =() => { 
    return (
     <View> 
     {this.state.showButtonList ? (
      <ButtonList 
      onButtonPressed={mins => { 
       this.setState({showButtonList: false}); 
       console.log(mins); 
      }} 
      /> 
     ) : (
      <OtherComponent /> 
     )} 
     </View> 
    ); 
    }; 

    // Renders both components but passes style override to hide the object 
    // ButtonList/OtherComponent are not destroyed and recreated using this method 
    hidingExample =() => { 
    return (
     <View> 
     <ButtonList 
      onButtonPressed={mins => { 
      this.setState({showButtonList: false}); 
      console.log(mins); 
      }} 
      style={!this.state.showButtonList && {display: 'none'}} 
     /> 

     <OtherComponent 
      style={this.state.showButtonList && {display: 'none'}} 
     /> 
     </View> 
    ); 
    };