Qué son los Portales (Portals) en React

Vista previa del material en texto

¿Qué son los Portales (Portals) en React? 
 
Los Portales (Portals) en React son una característica que permite renderizar un 
componente en un nodo del DOM que se encuentra fuera de la jerarquía del 
componente padre. En otras palabras, los Portales permiten a los componentes hijos 
renderizarse y montarse en un nodo del DOM que está fuera de su componente 
contenedor habitual. 
 
Esta funcionalidad es especialmente útil cuando se desea renderizar contenido en un 
área del DOM que no está directamente relacionada con la estructura del componente 
actual, como superposiciones (modales), notificaciones, ventanas emergentes, ventanas 
modales, y cualquier otro caso en el que desees renderizar un componente fuera del 
flujo de su componente padre. 
 
Los Portals se crean utilizando la función `createPortal` proporcionada por React, y su 
sintaxis es la siguiente: 
 
*********************************************************** 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
const MiPortal = (props) => { 
 return ReactDOM.createPortal( 
 props.children, // Contenido a renderizar 
 document.getElementById('portal-root') // Nodo del DOM donde se renderizará el 
contenido 
 ); 
}; 
 
export default MiPortal; 
**************************************************************** 
 
En este ejemplo, hemos creado un componente `MiPortal` que utiliza 
`ReactDOM.createPortal` para renderizar su contenido en un nodo del DOM con el ID 
`portal-root`. El primer argumento de `createPortal` es el contenido que se desea 
renderizar, que generalmente es el contenido del componente actual (`props.children`). 
El segundo argumento es el nodo del DOM donde se montará el contenido. 
 
Para utilizar el portal en otro componente, simplemente puedes incluir `MiPortal` en el 
JSX del componente: 
 
************************************************************ 
import React from 'react'; 
import MiPortal from './MiPortal'; 
 
const MiComponente = () => { 
 return ( 
 <div> 
 {/* Contenido del componente */} 
 <p>Este es el contenido del componente.</p> 
 
 {/* Usando el portal */} 
 <MiPortal> 
 <div> 
 <p>Contenido renderizado en el portal</p> 
 </div> 
 </MiPortal> 
 </div> 
 ); 
}; 
 
export default MiComponente; 
********************************************************** 
 
Hemos incluido el componente `MiPortal` dentro de `MiComponente`, y el contenido 
dentro de `MiPortal` se renderizará en el nodo del DOM con el ID `portal-root`, que 
puede estar ubicado en cualquier lugar de la estructura del DOM. 
 
Los Portals son una característica poderosa en React para renderizar contenido en áreas 
específicas del DOM que están fuera del flujo de la jerarquía de componentes. Son útiles 
para crear interfaces más flexibles y modulares, y para mejorar la organización y la 
reutilización de componentes en aplicaciones más complejas.