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!