Un portal renderizza i figli in una posizione diversa nel DOM (al di fuori della gerarchia DOM del parent), pur rimanendo nell'albero dei componenti React — quindi context, props ed eventi funzionano come se fossero annidati normalmente.
{ createPortal } ;
() {
(
,
.()
);
}
I modal, tooltip, dropdown e toast devono sfuggire al contesto overflow: hidden o z-index stacking di un antenato. Se il modal fosse annidato profondamente in una scheda con overflow: hidden, verrebbe tagliato. Renderizzarlo a body tramite un portal evita completamente questo problema.
Questa è la parte sottile e potente: anche se il DOM del modal vive sotto body, un onClick su un antenato React si attiva comunque, perché il bubbling degli eventi segue l'albero React, non l'albero DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Un portal risolve il positioning, non l'a11y. Per i dialog hai ancora bisogno di focus trapping, role="dialog"/aria-modal e Escape-to-close (oppure usa l'elemento nativo <dialog> che gestisce gran parte di questo).