Portal hurudisha watoto hadi mahali tofauti katika DOM (nje ya uongezaji DOM wa mzazi), wakati zikibaki katika React's mti wa sehemu — kwa hiyo muktadha, props, na matukio bado hufanya kazi kana kwamba zilizowekwa kawaida.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, na toasts lazima kutoroka overflow: hidden ya mzazi au muktadha wa z-index stacking. Ikiwa modal ilikuwa nested kwa kina ndani ya kadi yenye overflow: hidden, ingekuwa iliyofichwa. Kurudisha kwenye body kupitia portal huepuka hilo kabisa.
Hii ni sehemu nyingi, yenye nguvu: hata ingawa DOM ya modal inaishi chini ya body, onClick kwenye mzazi wa React bado huanza, kwa sababu event bubbling inafuata mti wa React, si mti wa DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal inasuluhisha nafasi, si a11y. Kwa ajili ya dialogs bado unahitaji trapping ya focus, role="dialog"/aria-modal, na Escape-ili-kufunga (au tumia <dialog> asili ambayo inashughulikia mengi ya hii).