Reagieren Sie, um den Status der untergeordneten Komponente von der übergeordneten Komponente zu ändern

Ich habe zwei Komponenten: Übergeordnete Komponente, von der aus ich den Status der untergeordneten Komponente ändern möchte:

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

Und untergeordnete Komponente :

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

Ich muß entweder Änderung des Kindes Komponente offen Zustand von übergeordneter Komponente, oder rufen Sie untergeordnete Komponente des toggleMenu () von übergeordneter Komponente als Schaltfläche in Parent Component geklickt wird?

Der Status sollte in der übergeordneten Komponente verwaltet werden. Sie können den openWert auf die untergeordnete Komponente übertragen, indem Sie eine Eigenschaft hinzufügen.

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

Die übergeordnete Komponente kann den untergeordneten Status verwalten, indem eine Requisite an das untergeordnete Element übergeben wird, und das untergeordnete Element konvertiert diese Requisite mithilfe von componentWillReceiveProps in den Status.

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

Die obige Antwort ist für mich teilweise richtig, aber in meinem Szenario möchte ich den Wert auf einen Status setzen, da ich den Wert zum Anzeigen / Umschalten eines Modals verwendet habe. Also habe ich wie unten verwendet. Hoffe es wird jemandem helfen.

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

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

Sie können eine Requisite vom übergeordneten Element senden und in der untergeordneten Komponente verwenden, sodass Sie die Statusänderungen des untergeordneten Elements auf den gesendeten Requisitenänderungen basieren. Sie können dies mithilfe von getDerivedStateFromProps in der untergeordneten Komponente verarbeiten.

Mit createRef können Sie den Status der untergeordneten Komponente von der übergeordneten Komponente ändern. Hier sind alle Schritte.

1. Erstellen Sie eine Methode, um den Status in der untergeordneten Komponente zu ändern.

   2 - Erstellen Sie mit React.createRef () eine Referenz für die untergeordnete Komponente in der übergeordneten Komponente.

   3 - Fügen Sie der Referenz eine Referenz mit der untergeordneten Komponente hinzu, indem Sie ref = {} verwenden.

   4 - Rufen Sie die untergeordnete Komponentenmethode mit this.yor-reference.current.method auf.

Übergeordnete Komponente

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

Untergeordnete Komponente

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