如何在子组件上设置状态？

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