lunes 30 septiembre 2024

Cómo usar Portals en React para renderizar componentes fuera del DOM principal

¿Qué son los Portals y cómo funcionan?

Un Portal en React permite renderizar contenido en un contenedor del DOM fuera de la jerarquía del componente principal. Esto se logra usando el método ReactDOM.createPortal, el cual toma dos parámetros:

1. Contenido: Los elementos React que se desean renderizar (pueden ser JSX o componentes).

2. Destino del DOM: Un nodo del DOM existente en el que se va a insertar el contenido del Portal.

Sintaxis básica de Portals

ReactDOM.createPortal(child, container);

child: El elemento React que se desea renderizar (puede ser un componente o JSX).
container: Un elemento del DOM (por ejemplo, document.getElementById('portal-root')).

¿Cuándo deberías usar Portals?

Los Portals son útiles en situaciones donde el componente necesita estar visualmente fuera del DOM principal pero lógicamente dentro de la jerarquía React, como por ejemplo:

Modales: Para evitar problemas de superposición y z-index con otros elementos.
Tooltips: Para garantizar que el tooltip se muestra por encima de todo el contenido.
Notificaciones: Para que se visualicen fuera de las restricciones de diseño del componente.

Ejemplo básico de Portals en React

En este ejemplo, creamos un componente modal que se renderiza en un nodo separado del DOM:

1. Primero, añade un contenedor en el HTML:

<!-- index.html -->
<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- Contenedor para el Portal -->
</body>

2. Ahora, implementa el componente con Portal:

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  // Crear el portal en el contenedor "modal-root"
  return ReactDOM.createPortal(
    <div style={modalStyle}>
      {children}
    </div>,
    document.getElementById('modal-root') // Nodo del DOM destino
  );
}

const modalStyle = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  background: 'white',
  padding: '20px',
  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.25)',
  zIndex: 1000,
};

function App() {
  return (
    <div>
      <h1>Componente Principal</h1>
      <Modal>
        <h2>Modal usando Portals</h2>
        <p>Este contenido se renderiza fuera del DOM del componente principal.</p>
      </Modal>
    </div>
  );
}

export default App;

En este ejemplo, el contenido del componente Modal se renderiza dentro de un div con el ID modal-root, que se encuentra fuera del root principal. A pesar de que el modal está en un nodo diferente en el DOM, sigue formando parte de la jerarquía React del componente App.

Beneficios de usar Portals

1. Superposición controlada: Los Portals permiten que los modales y tooltips se muestren por encima de otros elementos sin interferir con el diseño del DOM.

2. Aislamiento de estilos: Puedes mantener el estilo del componente principal separado del Portal.

3. Manejo adecuado de eventos: Los Portals mantienen la relación jerárquica en términos de eventos, lo que significa que la propagación de eventos y contextos funciona de manera consistente.

Consideraciones al usar Portals

Aunque los Portals permiten una mayor flexibilidad en la renderización, es importante tener en cuenta lo siguiente:

Los eventos como onClick se propagan desde los elementos del Portal hacia los ancestros del componente React, incluso si se encuentran fuera del DOM visualmente.
Pueden complicar el manejo del estilo y el posicionamiento si no se tiene en cuenta la estructura del contenedor externo.

Referencia oficial

Para más información y ejemplos avanzados de uso de Portals, visita la documentación oficial de React.

Etiquetas:

javascript react

Creado por:

Jorge García

Fullstack developer