Tengo un componente de encabezado que contiene un botón y quiero que este botón muestre otro componente (página modal) cuando se hace clic en él.
¿Puedo hacer algo como esto?
Aquí está mi componente de encabezado:
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 /> ) } }Aquí está mi componente para la página modal que debe mostrarse cuando se hace clic en el botón del otro componente:
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> ) } }Biblioteca que se utiliza para el modal: https://github.com/marcio/react-skylight
Más como esto:
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" /> ) } } Asegúrese de exponer un método showMe() en su componente secundario:
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> ) } } Básicamente, lo que sucede aquí es envolver el método show() de SkyLight en el propio método de su componente secundario (en este caso, showMe() ). Luego, en su componente principal, agrega una referencia a su componente secundario incluido para que pueda hacer referencia a él y llamar a ese método.