Saltar al contenido principal

Portales

Todas las aplicaciones realizas con React suelen colgar siempre de un div que se encuentra en el HTML.

9.0-portals/index.html
loading...

Uno de los inconvenientes que se puede presentar al usar este sistema, es la necesidad de tener un elemento por encima de los elementos del div principal. Los portals permiten definir nuevos puntos de entrada para componentes de React, permitiendo abandonar el árbol DOM principal de la aplicación.

9.0-portals/index.html
loading...

Para crear un portal React DOM dispone de la función createPortal que recibe dos parámetros:

  • El primero es el componente a renderizar dentro del nuevo árbol.
  • El segundo el elemento del DOM donde montar el componente.
9.0-portals/src/components/Table/TableDetailsModal.jsx
loading...

Una vez configurado el portal, el componente se va a comportar como cualquier otro y es utilizable desde cualquier punto de la aplicación.

9.0-portals/src/components/App.jsx
loading...