Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Renderiza componentes de React en distintos elementos del DOM

Gracias a los portales de React puedes dividir tu app y renderizar cada hijo en distintos contenedores. Así puedes integrar una App React en un proyecto existente.

Renderiza componentes de React en distintos elementos del DOM

Cuando comenzamos con React.js lo primero que se enseña es que la aplicación siempre se renderiza en un elemento del DOM, normalmente un div con un id definido, y se hace con el método render de la clase ReactDOM

ReactDOM.render(<Component />, document.getElementById('root'))

Sin embargo, hay casos en los que queremos separar la aplicación en distintos elementos del DOM, sobretodo cuando es una aplicación sobre un proyecto existente con su plantilla ya definida en HTML. Esto es posible gracias a los portales de React

Los portales permiten renderizar hijos de la aplicación dentro de un elemento del DOM. Se definen así:

ReactDOM.createPortal(child, container)

Donde child es un elemento hijo de React y container el elmento del DOM en el que será renderizado.

Un ejemplo es que tengas un sitio hecho, y hayas decidido agregar un chat desarrollado con React. Pero quieres tener la lista de usuarios en un div y el chat en otro div. Es decir, que no pueden formar parte del mismo contenedor.

Este es nuestro HTML, en el que hemos creado dos contendores, root y ed-contacts

<body>
    <div id="root"></div>
    <div id="ed-contacts"></div>
</body>

Ahora renderizamos la aplicación en el contenedor principal.

const root = document.getElementById('root')
ReactDOM.render(<App />, root)

Dentro de la App creamos un portal para el componente <Users /> indicando que será renderizado dentro de ed-contacts.

const App = () => {
    const contacts = document.getElementById('ed-contacts')
    return (
    <div>
        <Chat />
        {
        ReactDOM.createPortal(<Users />, contacts)
        }
    </div>
    )
}

La ventaja de esto, es que aún tenemos la posibilidad de comunicar ambos componentes y manipular sus estados con total normalidad, y a su vez maquetar y estilizar sus contenedores (root y ed-contacts) como queramos.

Se recomienda no usar el método getElementById() en React cuando quieres hacer referencia a un elemento del Virtual DOM, pero en éste caso, el elemento que le pasamos a ReactDOM.createPortal() es un elemento que ya existe en el HTML, fuera del Virtual DOM construido por React.

Espero pongas en práctica ésta interesante característica de la guía avanzada de la documentación de React y te vuelvas cada vez más experto en esta librería, ¡Nos vemos pronto!

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal