独立组件之间的通信反应

Question

我一直遇到问题，我想在每次点击一个特定按钮时写一个div，但是按钮在一个组件中，我想要创建div的菜单也在另一个组件中，两个主要组件都在一个组件中，是否有办法实现这一目标？所以它的结构都是这样的：

这是包含较小组件的根组件：

export class Root extends React.Component {
  render() {
    return(
      <div className="Body">
        <div id="SideBar" ><SideMenu/></div>
          <MenuCocktails/>
          <MenuBeers/>
          <MenuVines/>
          <MenuLemonades/>
          <MenuSoftDrinks/>
          <MenuCollection/>
          <MenuCharger/>
        <div id="BottomMenu"><BottomMenu/></div>
      </div>
    )
  }
}

这是我想要创建的div菜单：

export class BottomMenu extends React.Component{
  constructor() {
    super();
    this.state = {
      shown: ''
    };
  }

  toggleMenu = () => {
    this.setState({shown: this.state.shown ? '' : 'visible'});
  }

  render() {
    return(
      <div>
        <button
          id="button"
          className={this.state.shown}
          onClick={this.toggleMenu}
        >
          My Cart
        </button>

        <div id="Header" className={this.state.shown}>
          <button id="CheckOutButton">Check Out</button>
        </div>
      </div>
    );
  }
}

这是带按钮的组件之一：

import React from "react";
import styles from "./MenuCocktails.css";
import plus from "./plus.png";

export class NiğdeGazozu extends React.Component{
  render() {
    return (
    <div id="menu-items-1">
      <div id="item-name">NIĞDE GAZOZU</div>
      <div id ="price-item">8 TL</div>
      <button id="plusbutton"><img src={plus}/></button>
    </div>
    );
  }
}