如何在子部分设置状态

Question

我有一个呈现按钮列表的组件，让我们调用此'按钮列表'。当单击一个按钮时，事件像这样冒泡：

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

对此，我想隐藏该按钮列表，并显示当前隐藏的另一个组件。该按钮列表具有某些状态，例如" state {cissible：true}"，我想切换它阻止其渲染。我如何打电话以切换该按钮列表的状态，然后在此视图中调用我的其他组件，以切换其可见状态以显示？

谢谢。

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>
    );
  };