React js Zustand Kind Komponente von Elternkomponente ändern

Question

Ich habe zwei Komponenten: geordnete Komponente aus dem ich Kind will Komponente Zustand ändern:

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

Und Kind Component:

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 muss entweder ändern der untergeordneten Komponente öffnen Staat von übergeordneten Komponente, oder rufen Child Componen t's toggleMenu() von Eltern-Komponente, wenn Button in der übergeordneten Komponente angeklickt wird?

Answer 1

Der Status sollte in der übergeordneten Komponente verwaltet werden. Sie können den Wert open an die untergeordnete Komponente übergeben, 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}/> 
    ); 
    } 
} 

Answer 2

Above Antwort ist teilweise richtig für mich, aber in meinem Szenario möchte ich den Wert in einen Zustand versetzen, weil ich den Wert verwendet haben, eine modale anzuzeigen/umzuschalten. Also habe ich wie folgt benutzt. Ich 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