Reaccionar portales

Descubra cómo utilizar los portales de React

React 16, lanzado en septiembre de 2017, presentó Portals.

Un portal es una forma de representar un elemento fuera de su jerarquía de componentes, en un componente separado.

Cuando se representa ese evento, los eventos que suceden en él son administrados por la jerarquía de componentes de React en lugar de por la jerarquía establecida por la posición DOM del elemento.

De ahí el nombre "portal": un elemento se encuentra en algún lugar del árbol DOM que está fuera del árbol de componentes de React normal, pero el árbol de componentes de React que lo incluye todavía está a cargo.

React ofrece una API fácil para hacer esto,ReactDOM.createPortal(), que acepta 2 argumentos. El primero es el elemento a renderizar, el segundo es el elemento DOM donde renderizarlo.

Un caso de uso clásico para esto son las ventanas modales.

Un modal para renderizar a pantalla completa debe vivir fuera del elemento, por lo que se puede diseñar correctamente usando CSS.

Entonces, si un modal se define como un componente:

class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }

componentDidMount() { document.getElementById(‘modal’).appendChild(this.el) }

componentWillUnmount() { document.getElementById(‘modal’).removeChild(this.el) }

render() { return ReactDOM.createPortal( this.props.children, this.el ) } }

Podemos hacer que un componente de la aplicación lo represente, y todos los eventos que suceden en el componente modal serán manejados por la aplicación, aunque técnicamente el modal se representa en un árbol DOM diferente:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {showModal: false}
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)

}

handleShow() { this.setState({showModal: true}) }

handleHide() { this.setState({showModal: false}) }

render() { const modal = this.state.showModal ? ( <Modal> <div> The modal <button onClick={this.handleHide}>Hide</button> </div> </Modal> ) : ‘’

<span style="color:#66d9ef">return</span> (
  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
    <span style="color:#a6e22e">The</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>}<span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Show</span> <span style="color:#a6e22e">modal</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
    {<span style="color:#a6e22e">modal</span>}
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
)

} }

ReactDOM.render(<App />, document.getElementById(‘app’))

Vea el ejemplo completo enhttps://codepen.io/flaviocopes/pen/KbdagX

Descarga mi gratisReact Handbook


Más tutoriales de react: