portal yana jefa yara zuwa waje daban a cikin DOM (wajen iyaye DOM hierarchy), amma har suna jiya cikin React component tree — don haka context, props, da events suna aiki kamar sun kasance nested normali.
{ createPortal } ;
() {
(
,
.()
);
}
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da GudummawaModals, tooltips, dropdowns, da toasts dole ne su tashi daga overflow: hidden na ancestor ko z-index stacking context. Idan modal ta kasance jiya a zurfin ciki na kadi mai overflow: hidden, za ta yanke. Yin amfani da portal don jefa ta zuwa body zai guje duka nan.
Dan wannan shine mahimman, ƙarfi: ko da yake DOM na modal yana jiya karkashin body, onClick akan React ancestor yanzu har yanzu yana kida, saboda event bubbling ya bi React tree, ba DOM tree ba:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal yana warware positioning, ba a11y ba. Ga dialogs kina buƙatar focus trapping, role="dialog"/aria-modal, da Escape-to-close (ko kuma yi amfani da native <dialog> element wanda ya damre gida da yawa daga wannan).