[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する

質問

2つのコンポーネントがあります。 親コンポーネント で、そこから子コンポーネントの状態を変更したい。

class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <ChildComponent />
      </div>
    );
  }
}

そして 子コンポーネント :

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

子コンポーネントの を開く の状態を親コンポーネントから変更するか、子コンポーネントの toggleMenu() を親コンポーネントから呼び出すか？

どのように解決するのですか？

状態は親コンポーネントで管理する必要があります。親コンポーネントから open の値を子コンポーネントに転送するには、プロパティを追加します。

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}