Member-only story

React Portals. Lanzar un popup que pueda acceder al estado del componente

Los React Portals permiten crear componentes que accedan al estado del componente padre pese a estar montados sobre elementos del DOM fuera de la jerarquía

Gerardo Fernández
6 min readAug 30, 2020

Para aquellos que no conozcáis los React Portals, esta API de React nos permite renderizar componentes hijos sobre elementos del DOM que se encuentren fuera de la jerarquía del elemento podre.

Tal y como apunta la documentación de React esto puede resultar muy útil en casos donde interactúen elementos que usan propiedades CSS como z-index u overflow , ya que los elementos hijos del DOM se ven restringidos por las definiciones de los padres. Gracias a los React Portals podremos renderizar en el DOM un componente fuera del padre y así conseguir saltarnos estas restricciones.

En el artículo de hoy quiero mostraros cómo podemos emplear los React Portals para crear popups mediante la instrucción window.open que puedan acceder al estado del componente padre tal y cómo por ejemplo hacen las típicas ventanas de chat de GMail.

¡Vamos allá!

¿Qué queremos hacer?

--

--

Gerardo Fernández
Gerardo Fernández

Written by Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React

No responses yet