portal બાળકોને DOM માં અલગ જગ્યાએ રેન્ડર કરે છે (આબાપના DOM હાયરાર્કીથી બહાર), જ્યારે તેઓ React ના component વૃક્ષમાં રહે છે — તેથી context, props, અને events તેવી જ રીતે કાર્ય કરે છે જાણે તેઓ સામાન્યપણે nested હોય.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, અને toasts ને આબાપના overflow: hidden અથવા z-index stacking context escape કરવું જોઈએ. જો modal કોઈ કાર્ડમાં overflow: hidden સાથે ઊંડાણમાં nested હોય તો તે કાપવામાં આવશે. તેને portal દ્વારા body માં રેન્ડર કરવું તે સંપૂર્ણપણે ટાળે છે.
યह બોધપૂર્વક, શક્તિશાળી ભાગ છે: જોકે modal નો DOM body ની નીચે રહે છે, React આબાપે onClick હજુ પણ ફાયર થાય છે, કારણ કે event bubbling React વૃક્ષને અનુસરે છે, DOM વૃક્ષને નહીં:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal positioning હલ કરે છે, a11y નહીં. Dialogs માટે તમારે હજુ પણ focus trapping, role="dialog"/aria-modal, અને Escape-to-close ની જરૂર છે (અથવા native <dialog> element નો ઉપયોગ કરો જે આમાંથી મોટાભાગને હેન્ડલ કરે છે).