如何從另一個組件調用組件方法？

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到你包含的子組件中，這樣你就可以引用它並調用該方法。