En portal rendrer barn-elementer til et annet sted i DOM-en (utenfor foreldrenes DOM-hierarki), mens de oppbevares i Reacts komponenttre — slik at kontekst, props og hendelser fremdeles fungerer som om de var nestet normalt.
{ createPortal } ;
() {
(
,
.()
);
}
Modaler, tooltips, rullegardinlister og toast-meldinger må unnslippe en forfader's overflow: hidden eller z-index stacking-kontekst. Hvis modalen var nestet dypt inne i et kort med overflow: hidden, ville den bli klippet av. Å rendrer den til body via en portal unngår det helt.
Dette er den subtile, kraftige delen: selv om modalens DOM lever under body, vil en onClick på en React-forfader fortsatt utløses, fordi hendelsespropagering følger React-treet, ikke DOM-treet:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
En portal løser posisjoneringen, ikke a11y. For dialoger trenger du fortsatt fokus-innsperring, role="dialog"/aria-modal, og Escape-til-lukk (eller bruk det native <dialog>-elementet som håndterer det meste av dette).