एक portal ले सन्तान तत्वहरूलाई DOM को फरक स्थानमा (अभिभावकको DOM पदानुक्रम बाहिर) रेन्डर गर्छ, तर तिनीहरूलाई React को component tree मा राख्छ — त्यसैले context, props, र events सामान्य गरी नेस्ट गरिएको जस्तै काम गर्छन्।
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, र toasts ले अभिभावकको overflow: hidden वा z-index stacking context बाट बाहिर निस्कनु पर्छ। यदि modal गहिराइमा card को अन्दर नेस्ट गरिएको थिए र card मा overflow: hidden छ भने, यो क्लिप हुने थिो। portal को मार्फत यसलाई body मा रेन्डर गरेर यो समस्या पूरै हराउन सकिन्छ।
यो सूक्ष्म र शक्तिशाली भाग हो: यद्यपि modal को DOM body को अन्दर छ, React अभिभावकमा onClick अझै पनि फायर हुन्छ, किनभने event bubbling DOM tree होइन, React tree अनुसार अनुगमन गर्छ:
<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 प्रयोग गर्नुहोस् जसले यो सबै कुरा सम्भाल्छ)।