A portal ngrenderake anak-anak menyang papan liya ing DOM (metu saka hierarki DOM induk), nanging tetep ing React component tree — dadi context, props, lan events tetep bisa dianggo kaya yen dicekel normal.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, lan toasts kudu lolos saka ancestor sing overflow: hidden utawa z-index stacking context. Yen modal ana ing jero card sing duwe overflow: hidden, bakal kepepet. Ngrenderake menyang body nganggo portal bisa ngilangi masalah iku.
Iki bagiane sing halus lan kuwat: sanadyan modal DOM isih ana ing body, onClick ing React ancestor tetep kedadeyan, jalaran event bubbling ngikut React tree, ora DOM tree:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal ngatasi positioning, ora a11y. Kanggo dialogs sampeyan tetep kudu focus trapping, role="dialog"/aria-modal, lan Escape-to-close (utawa pake elemen <dialog> native sing nangani akeh saka iki).