En portal renderar barn till en annan plats i DOM:en (utanför förälderns DOM-hierarki), medan den behålls i Reacts komponentträd — så kontext, props och events fungerar fortfarande som om de var kapslade normalt.
{ createPortal } ;
() {
(
,
.()
);
}
Modaler, tooltips, listrutor och toasts måste undvika en förfaders overflow: hidden eller z-index stackningskontext. Om modalen vore kapslad djupt inuti ett kort med overflow: hidden skulle den klippas av. Genom att rendera den till body via en portal undviker du det helt.
Detta är den subtila, kraftfulla delen: även om modalens DOM lever under body, skjuts en onClick på en React-förfader fortfarande, eftersom event bubbling följer React-trädet, inte DOM-trädet:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
En portal löser positionering, inte a11y. För dialoger behöver du fortfarande fokusöverordning, role="dialog"/aria-modal och Escape-för-stänga (eller använd det inbyggda <dialog>-elementet som hanterar mycket av detta).