React Portals es una poderosa herramienta que ofrece React para mover componentes entre diferentes nodos de HTML, casi como si de magia se tratara. Imagina que tienes un componente que deseas renderizar en un lugar completamente distinto, fuera del flujo DOM principal de tu aplicación. Los Portals te permiten hacer justamente eso: teletransportar componentes entre nodos, manteniendo la estructura del componente principal. Esto resulta especialmente útil cuando se maneja contenido dinámico como modales o tooltips, donde el UI necesita aparecer fuera del contenedor principal.
¿Cómo se implementan los Portals en un proyecto React?
Para implementar Portals en un proyecto React primero se debe crear un nodo HTML adicional en el archivo index.html. Este nodo será el destino al que se teletransportará el contenido del componente. La implementación típica requiere las siguientes acciones:
Crear el nodo en HTML: Añadir un div con un ID único al archivo index.html. Por ejemplo <div id="modal"></div>.
Uso de react-dom.createPortal: Dentro del componente, usar react-dom.createPortal para definir qué contenido será teletransportado y a qué nodo HTML.
importReactDOMfrom'react-dom';functionModal({ children }){returnReactDOM.createPortal(<divclassName="modal">{children}</div>,document.getElementById('modal'));}
¿Cómo controlar la visibilidad de un modal con estado?
Para controlar cuándo un modal debe estar visible se puede usar un estado en React, por ejemplo openModal. El modal solo debe renderizarse cuando este estado sea true. Se puede lograr lo siguiente:
Implementar Portals en React para crear modales y otros componentes de UI dinámicos es una táctica beneficiosa que maneja eficientemente la renderización de componentes fuera del DOM principal. Usar estados para controlar la visibilidad y CSS para el estilo asegura que estos elementos no solo funcionen bien, sino que también se vean bien. Anímate a utilizar estos conceptos en tu próximo proyecto, ¡transforma y mejora la experiencia de tus usuarios!
No me funcionaba el ReactDOM.createPortal, buscando en la documentación de React me indicaba que se escribe diferente, cabe aclarar que es la versión 18:
prueba en arrow porque en mi inocencia la veo bien
const Modal = ({childre}) =>{
return createPortal(
el código como lo tienes al interior de createporta
);
};
Me estaba sucediendo que al ponerle el valor 'true', desaparecía todo el contenido. Lo pude solucionar escribiendolo de esta menra. Gracias
¿Para qué sirven los portales?
Los portales nos permiten ubicar un componente hijo dentro del conjunto de componentes que se renderizan en el nodo html principal del DOM, generalmente el id = “root”, pero hacer que aparezcan en un **nodo **fuera de la jerarquía del DOM. Esto permite una mayor facilidad a la hora de maquetar y estilizar componentes que aparecen y desaparecen en el renderizado de nuestra página como los modales (ventanas).
Gracias a los portales, por ejemplo, podemos ubicar a nuestro componente <Modal> luego del conjunto de componentes que tenemos en la AppUI como <TodoCounter/>, <TodoSearch/> o <CreateTodoButton/>, pero el renderizado se hará en el div del nodo html que nosotros indiquemos, osea fuera del “root”. Esto trae como ventaja por ejemplo poder estilizar fácilmente el modal para que aparezca por encima del resto de componentes.
Hola! Tengo una pregunta, la mejor forma de trabajar con APIS seria con contexto? es decir, traer toda la info de la API y luego consumirla en cada lugar que necesite?
Seria algo asi, si se finjan tego declarado mi useState en false como dijo el profesor porque quiero que mi modal desde el principio este cerrado, luego en mi etiqueta de button, con el manejador de onClick hago que el estado cambie a true y como la condicion abajo dice cada vez que openModal sea verdadero muestrame ese componente. Cabe resaltar que en mi componente de modal tengo un boton llamado closeModal el cual cuando quiero cerrar el modal lo actualizo a false y este completa la accion.
Para aquellos que quieran eliminar el div interno con la clase modal para que asi solo tengan un solo div y no dos, pueden remplazar el div del componente Modal por un React.Fragment, recuerden se usa con esta etiquetas <>{children}</>.
cual es la diferencia con el otro nodo que tiene el root? Y que utilidad tiene esto, porque querría crear el modal en otro nodo en vez de agregarlo a la misma app?
El uso más "obvio" es para crear modales. Pero más allá de eso puede pasar que tengas React en una parte de la aplicación, pero no en toda la aplicación. Esto puede pasar si apenas estás migrando a React, pero la aplicación sigue teniendo secciones con alguna otra tecnología. Gracias a los portales puedes acceder a esos nodos donde originalmente no había conexión con React.
En React 18, las funciones como createPortal aún se exportan desde react-dom, pero debes importarlas directamente en lugar de acceder a ellas a través de un objeto ReactDOM importado.
Si estás utilizando React 18, deberías importar createPortal directamente de react-dom así:
import React from "react";
import { createPortal } from "react-dom"; // Importación directa de createPortal
function Modal({children}) {
return createPortal(
<div className="Modal">
{children}
</div>,
document.getElementById('modal')
);
}
export { Modal };
Cortesía de ChatGPT
Lo que hice para abrir y cerrar el Modal fue pasarle el contexto al componenete createTodoButton y al hacerle click que cambie su estado de false a true y a la inversa:
