0Pricing
React Academy · Lección

¿Qué son los React Portals?

Comprenda la API createPortal y por qué resulta útil renderizar fuera del div raíz.

¿Qué son los React Portals? es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá qué son los React Portals, por qué resulta útil renderizar fuera del árbol DOM padre y cómo usar la API createPortal.

La jerarquía DOM normal de React

De forma predeterminada, cada componente se renderiza dentro del nodo DOM de su componente padre. Por lo general, toda la aplicación de React vive dentro de un único `
`. Esto funciona bien hasta que necesita que un modal, un tooltip o un menú desplegable escape de un padre con `overflow: hidden`.

¿Qué es un Portal?

Un **Portal** le permite renderizar la salida de un componente en un nodo DOM diferente, uno que existe fuera de la raíz de React. El árbol de React del componente no cambia; solo cambia su posición en el DOM.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Por qué existen los Portals

Las propiedades CSS como `overflow: hidden`, los contextos de apilamiento de `z-index` y `transform` en un elemento padre pueden recortar u ocultar los elementos secundarios. Los Portals escapan de estas restricciones al asociar la salida renderizada a un nodo DOM diferente.

El bubbling de eventos sigue funcionando

Aunque el nodo DOM del portal está fuera del padre, **los eventos de React siguen propagándose** por el árbol de componentes de React, no por el árbol DOM. Un clic dentro de un modal renderizado mediante un portal se propagará hasta su padre en React.

Creación del destino de un Portal

Puede crear un portal en cualquier nodo DOM existente. Un patrón habitual consiste en agregar un `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

El ciclo de vida del Portal está vinculado a su padre de React

Un portal se monta cuando se monta su componente padre y se desmonta cuando el padre se desmonta. React sigue registrándolo como parte del mismo árbol de componentes, por lo que el contexto y las refs funcionan con normalidad.

El contexto funciona a través de los Portals

Como los portales siguen formando parte del árbol de componentes de React, los valores de contexto proporcionados por encima del portal siguen estando disponibles dentro de él. La posición en el DOM no afecta a la cadena de contexto de React.

Uso de createPortal con estado

Controle la visibilidad del portal con una variable de estado. Alternela con un botón y el contenido del portal aparecerá en document.body, mientras el botón permanecerá en su posición normal del DOM.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Renderizado del lado del servidor y Portals

Los Portals necesitan que exista un nodo DOM, por lo que siempre se ejecutan en el cliente. En Next.js u otras configuraciones con SSR, asegúrese de que el código de renderizado del portal se ejecute solo en el navegador mediante `useEffect` o una comprobación del estado de montaje.

Comprobación rápida

Los React Portals renderizan contenido en un nodo DOM diferente. ¿Qué aspecto del árbol de componentes de React se ve afectado por esto?

Resumen

Los Portals le permiten renderizar la salida de React en cualquier nodo DOM mediante createPortal(). El árbol de React, el contexto y la propagación de eventos no se ven afectados. Úselos para escapar de las restricciones de overflow y z-index en modales y tooltips.

A continuación

Siguiente lección: **Building a Modal Component with Portals**: creará un modal totalmente reutilizable que se renderiza mediante un portal en document.body y cuya apertura y cierre se gestionan mediante el estado.

Preguntas frecuentes

¿La lección «¿Qué son los React Portals?» es gratis?

Sí — el texto completo de «¿Qué son los React Portals?» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «¿Qué son los React Portals?»?

Comprenda la API createPortal y por qué resulta útil renderizar fuera del div raíz. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «¿Qué son los React Portals?»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. ¿Qué son los React Portals?
  2. Construcción de un componente modal con Portals
  3. Gestión del foco y trampas de teclado en modales
  4. Tooltips y menús desplegables con Portals
← Volver a React Academy