React js cambia el estado del componente secundario del componente principal

Tengo dos componentes: Componente principal del cual quiero cambiar el estado del componente secundario:

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

Y componente secundario :

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

¿Necesito cambiar el estado abierto del componente secundario del componente principal o llamar al toggleMenu () del componente secundario del componente principal cuando se hace clic en el botón del componente principal?

El estado debe administrarse en el componente principal. Puede transferir el openvalor al componente secundario agregando una propiedad.

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

El componente principal puede administrar el estado del niño pasando un accesorio al niño y el niño convierte este accesorio en estado usando componentWillReceiveProps.

class ParentComponent extends Component {
  state = { drawerOpen: false }
  toggleChildMenu = () => {
    this.setState({ drawerOpen: !this.state.drawerOpen })
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
        <ChildComponent drawerOpen={this.state.drawerOpen} />
      </div>
    )
  }
}

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

  componentWillReceiveProps(props) {
    this.setState({ open: props.drawerOpen })
  }

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

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

La respuesta anterior es parcialmente correcta para mí, pero en mi escenario, quiero establecer el valor en un estado, porque he usado el valor para mostrar / alternar un modal. Así que lo he usado como a continuación. Espero que ayude a alguien.

class Child extends React.Component {
  state = {
    visible:false
  };

  handleCancel = (e) => {
      e.preventDefault();
      this.setState({ visible: false });
  };

  componentDidMount() {
    this.props.onRef(this)
  }

  componentWillUnmount() {
    this.props.onRef(undefined)
  }

  method() {
    this.setState({ visible: true });
  }

  render() {
    return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
      {"Content"}
    </Modal>)
  }
}

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

Referencia: https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Puede utilizar createRef para cambiar el estado del componente secundario del componente principal. Aquí están todos los pasos.

1. Cree un método para cambiar el estado en el componente secundario.

   2 - Cree una referencia para el componente secundario en el componente principal usando React.createRef ().

   3 - Adjunte una referencia con el componente secundario usando ref = {}.

   4 - Llame al método del componente hijo usando this.yor-reference.current.method.

Componente padre

class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
  render() {
    return (
      <div>
        <button onClick={this.changeChild.current.toggleMenu()}>
          Toggle Menu from Parent
        </button>
        <ChildComponent ref={this.changeChild} />
      </div>
    );
  }
}

Componente hijo

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

Puede enviar un accesorio del padre y usarlo en el componente secundario, por lo que basará los cambios de estado del niño en los cambios de accesorio enviados y puede manejar esto utilizando getDerivedStateFromProps en el componente secundario.