A portal jirrenderi children f'post differenti fil-DOM (barra l-DOM hierarchy tal-parent), filwaqt li jbattihom fil-component tree ta' React — għalhekk context, props, u events xorta jaħdmu kif kieku kienu nested b'mod normali.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, u toasts għandhom iggħaqqdu minn ancestor's overflow: hidden jew z-index stacking context. Jekk il-modal kien nested fond ġo card b'overflow: hidden, ikun ikun ittaqta'. Ir-rendering tiegħu ġal body permezz ta' portal jevita dak kompletament.
Din hija l-parti sottili u qawwija: anke jekk il-modal's DOM jgħix taħt body, onClick fuq React ancestor xorta jaħrab, għaliex event bubbling isegwi l-React tree, mhux id-DOM tree:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal isolvi positioning, mhux a11y. Għal dialogs xorta għandek bżonn focus trapping, role="dialog"/aria-modal, u Escape-to-close (jew uża l-elemento nattiv <dialog> li jgħaqqdu ħafna minn dan).