我想有3个按钮和3个相关组件。 以便在单击按钮时显示其相关组件。 下面是我的代码:

主要成分:

      class Main extends Component {   constructor(props) {
        super(props);
        this.state = {
          show: false,
        }}  

      onClick(e) {
        e.preventDefault()
        console.log(e.target.id)
        this.setState({ show: !this.state.show });   }  

     renderTabs() {
        var child = this.props.child;
        var items = [];
        __.forEach(child, (item, index) => {
          items.push(
            <div>
              <Button id={index} onClick={(e) => this.onClick(e)}>{item.data}</Button>
              {this.state.show ? (
                <CropComponent title={item.data} opts={item.opts} data={item.child} />
              ) : null}
            </div>
          );
        });
        return items;  
      } 
    render() {
        var opts = this.props.opts;
        return (
          <div>
            {this.renderTabs()}
          </div>
        )} 
    }

    export default Main;

下面是我的CropComponent:

 class CropComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {   
    return (
        <div>hello {this.props.data}</div>      
    );
  }
}

export default CropComponent;

这里是我的按钮，我怎样才能显示它的相关组件时，点击一个按钮和隐藏它时，再点击同一按钮？