他のコンポーネントからコンポーネントメソッドを呼び出す方法は？

Question

ボタンを含むヘッダーコンポーネントがあり、クリックするとこのボタンに別のコンポーネント（モーダルページ）が表示されます。

は、私はこのような何かを行うことができます：ここで

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

    ) 
    } 
} 

が他のコンポーネント上のボタンをクリックますときに表示されなければならないモーダルページのための私のコンポーネントです：

は、ここに私のヘッダーコンポーネントの

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

ライブラリをモーダルに使用されている：https://github.com/marcio/react-skylight

Answer 1

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

あなたの子コンポーネントに​​方法を公開してくださいビーイング：基本的には

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

、あなたの子コンポーネントの独自の方法で天窓のshow()メソッドをラップされたものをここで起こっているこのような詳細（この場合、​​）。次に、親コンポーネントで、参照を追加してそのメソッドを呼び出すことができるように、インクルードされた子コンポーネントにrefを追加します。