En portal renderer børneelementer til et andet sted i DOM (uden for forælderens DOM-hierarki), mens de bevares i Reacts komponenttræ — så kontekst, props og events virker, som om de var indlejret normalt.
{ createPortal } ;
() {
(
,
.()
);
}
Modaler, tooltips, dropdowns og toasts skal undslippe en forfaders overflow: hidden eller z-index stakings kontekst. Hvis modalen var indlejret dybt inde i et kort med overflow: hidden, ville det blive klippet. At rendere det til body via en portal undgår det helt.
Dette er den subtile, kraftfulde del: selvom modalens DOM bor under body, udløses en onClick på en React forfader stadig, fordi event bubbling følger React-træet, ikke DOM-træet:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
En portal løser positionering, ikke a11y. For dialoger har du stadig brug for fokus trapping, role="dialog"/aria-modal og Escape-to-close (eller brug det native <dialog> element, som håndterer meget af dette).