IT技术 - 如何从另一个组件调用一个组件方法？ - 吾爱随笔录

我有一个包含按钮的标题组件，我希望该按钮在单击时显示另一个组件（模态页面）。

我可以做这样的事情：

这是我的标题组件：

 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

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