Un portal renderizează copii într-un loc diferit în DOM (în afara ierarhiei DOM a părintelui), dar le păstrează în arborele de componente React — deci context, props și evenimente funcționează ca și cum ar fi imbricate în mod normal.
{ createPortal } ;
() {
(
,
.()
);
}
Modalele, tooltip-urile, dropdown-urile și toast-urile trebuie să scape de contextul stacking overflow: hidden sau z-index al unui strămoș. Dacă modalul ar fi imbricat adânc într-un card cu overflow: hidden, ar fi tăiat. Renderizarea sa la body prin intermediul unui portal evită complet aceasta.
Acesta este partea subtilă și puternică: chiar dacă DOM-ul modalului trăiește sub body, un onClick pe un strămoș React se declanșează în continuare, deoarece bubbling-ul evenimentelor urmează arborele React, nu arborele DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Un portal rezolvă poziționarea, nu a11y. Pentru dialoguri trebuie totuși focus trapping, role="dialog"/aria-modal și Escape-to-close (sau folosește elementul nativ <dialog> care gestionează o mare parte din asta).