API · React DOM
createPortal
Renderizar fuera del árbol
createPortal renderiza un nodo en otra parte del DOM mientras lo mantiene como hijo lógico de tu componente. La pieza que hace que modales y tooltips escapen overflow:hidden y z-index hostiles.
Lo que conserva
Aunque el DOM esté en otro sitio, el portal sigue dentro del árbol de React: contextos, eventos sintéticos burbujean hacia el padre lógico, y los efectos disparan como si estuvieran en su lugar.
El destino
Suele ser document.body o un nodo dedicado con id modal-root. Garantiza que el destino existe antes del render — montarlo en el index.html es lo más seguro.
Tropiezos comunes
- 01Los eventos burbujean por el árbol REACT, no por el DOM. Onclicks en el modal llegan a su padre lógico.
- 02Si el destino del portal aún no existe en el DOM, el render falla — móntalo antes.
- 03Cuidado con el foco: cuando abras un modal, mueve el foco dentro y atrápalo (focus trap).
¿Fue útil?
Inicia sesión para dar feedback