Një portal renderon fëmijët në një vend tjetër në DOM (jashtë hierarkisë DOM të prindërit), por duke i mbajtur ato në pemën e komponentëve React — kështu që konteksti, props dhe ngjarjet punojnë ende sikur të ishin vendosur normalisht.
{ createPortal } ;
() {
(
,
.()
);
}
Modalitetet, tooltip-et, dropdown-et dhe toast-et duhet të shpëtojnë nga overflow: hidden ose z-index stacking context i një paraardhësi. Nëse modali do të ishte vendosur thellë brenda një kartele me overflow: hidden, do të pritej. Renderimi i tij në body përmes një portali e shmanget plotësisht këtë.
Ky është pjesa delikate dhe e fuqishme: edhe pse DOM i modalit jeton nën body, një onClick në një paraardhës React ende aktivizohet, sepse bubbling-ja e ngjarjeve ndjek pemën React, jo pemën DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Një portal zgjidh pozicionimin, jo a11y. Për dialoge ju Ende keni nevojë për fokus trapping, role="dialog"/aria-modal dhe Escape-për-mbyllje (ose përdorni elementin nativ <dialog> i cili mendon shumë nga këto).