So rufen Sie eine Komponentenmethode von einer anderen Komponente auf?

Question

Ich habe eine Header-Komponente, die eine Schaltfläche enthalten, und ich möchte diese Taste eine andere Komponente (modal Seite) angezeigt werden, wenn es angeklickt wird.

Kann ich etwas tun, wie folgt aus:

Hier ist meine Header-Komponente:

import ComponentToDisplay from './components/ComponentToDisplay/index' 

class Header extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    props : { 
    user: User 
    } 

    _handleInvitePlayerClick =() => { 
    this.refs.simpleDialog.show(); 
    } 

    render(){ 

    return(
    <Button onClick={this._handleInvitePlayerClick} ><myButton/></Button> 
    <ComponentToDisplay /> 

    ) 
    } 
} 

Hier ist meine Komponente für die modal-Seite, die angezeigt werden soll, wenn die Taste auf der anderen Komponente angeklickt wird:

class ComponentToDisplay extends React.Component { 

componentDidMount() { 

} 

render() { 

return (

<div> 
    <SkyLight 
    ref="simpleDialog" 
    title={"Title for the modal"}> 
    {"Text inside the modal."} 
    <Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button> 
    </SkyLight> 
</div> 
) 
} 
} 

Bibliothek für die modale verwendet: https://github.com/marcio/react-skylight

Answer 1

Mehr wie folgt aus:

class Header extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    props: { 
     user: User 
    } 

    render() { 
     return (
      <Button onClick={() => this.refs.componentToDisplay.showMe()}><myButton /></Button> 
      <ComponentToDisplay ref="componentToDisplay" /> 
     ) 
    } 
} 

sicher zu sein, eine showMe() Methode auf Ihrem Kind Komponente zu entlarven:

class ComponentToDisplay extends React.Component { 

    showMe() { 
     this.refs.simpleDialog.show(); 
    } 

    render() { 
     return (
      <div> 
       <SkyLight 
        ref="simpleDialog" 
        title={"Title for the modal"}> 
        {"Text inside the modal."} 
        <Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button> 
       </SkyLight> 
      </div> 
     ) 
    } 
} 

Im Grunde, was hier vor sich geht Sie das SkyLight eigene Methode show() Methode in Ihrem Kind Komponente wird wickeln (in diesem Fall showMe()). Dann fügen Sie in Ihrer übergeordneten Komponente einen Verweis zu Ihrer enthaltenen untergeordneten Komponente hinzu, so dass Sie darauf verweisen und diese Methode aufrufen können.