🌌 React Portals: renderizado fuera del árbol principal

🌌 React Portals: renderizado fuera del árbol principal

React Portals permiten renderizar componentes hijos en un nodo del DOM que se encuentra fuera de la jerarquía del componente padre. Esto es útil para modales, tooltips, notificaciones u otros elementos que deben escapar del flujo normal del DOM.

---

1️⃣ ¿Qué es un Portal?

Normalmente, los componentes React se renderizan dentro del contenedor principal (por ejemplo, <div id="root">). Con Portals, puedes renderizar un componente en cualquier otro nodo del DOM.

// Crear un portal
ReactDOM.createPortal(
  <div>Contenido del portal</div>,
  document.getElementById('portal-root')
);
  

---

2️⃣ Ejemplo práctico: Modal con Portal

Vamos a crear un modal que se renderiza fuera del árbol principal para evitar problemas de estilo o solapamiento.

function Modal({ isOpen, onClose }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div style={{
        background: '#fff',
        padding: '20px',
        borderRadius: '8px'
      }}>
        <h2>¡Hola desde el Portal!</h2>
        <button onClick={onClose}>Cerrar</button>
      </div>
    </div>,
    document.getElementById('portal-root')
  );
}

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Abrir Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Al hacer clic, el modal se renderiza fuera del DOM principal.

---

3️⃣ Buenas prácticas con Portals

• ✅ Usar Portals para modales, tooltips o elementos flotantes que no dependan del layout principal.
• ✅ Mantener el control del estado en el componente padre y pasar props al portal.
• ✅ Evitar Portals para componentes que no necesiten escapar del DOM, para no complicar la jerarquía.

---

4️⃣ Resumen

React Portals permiten renderizar componentes fuera del contenedor principal, manteniendo la comunicación con el estado del componente padre. Son ideales para modales, tooltips y otros elementos que necesitan escapar de la jerarquía normal del DOM.

← Volver al índice