एक portal children ला DOM मध्ये भिन्न स्थानावर (parent च्या DOM hierarchy बाहेर) render करतो, परंतु त्यांना React च्या component tree मध्ये ठेवतो — त्यामुळे context, props आणि events अशा प्रकारे काम करतात जणू त्या सामान्यपणे nested आहेत.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns आणि toasts ला ancestor च्या overflow: hidden किंवा z-index stacking context मधून escape करायला हवे. जर modal खोलवर nested असेल असे कार्ड ज्याचा overflow: hidden आहे, तर ते clip होऊन जाईल. Portal द्वारे body वर त्याचे rendering केल्याने हे पूर्णपणे टाळले जाते.
हा सूक्ष्म, शक्तिशाली भाग आहे: जरी modal चे DOM body अंतर्गत राहतो, React ancestor वर onClick अजून fire होतो, कारण event bubbling React tree अनुसरण करते, DOM 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 वापरा जे याच्या बहुतेक गोष्टी हाताळते).