React portals क्या हैं और वे कब उपयोगी होते हैं?

Question

Accepted Answer

एक **portal** बच्चों को DOM में **एक अलग जगह पर** render करता है (parent के DOM계层 के बाहर), फिर भी वे React के component tree में रहते हैं — इसलिए context, props, और events वैसे ही काम करते हैं जैसे कि वे सामान्य रूप से nested हों। ```jsx import { createPortal } from "react-dom"; function Modal({ children, onClose }) { // renders into

at the end of , // NOT inside whatever component called return createPortal(

{children}

, document.getElementById("modal-root") ); } ``` ## इसकी आवश्यकता क्यों है Modals, tooltips, dropdowns, और toasts को एक ancestor के `overflow: hidden` या `z-index` stacking context से **बाहर निकलना** चाहिए। अगर modal किसी कार्ड के अंदर गहराई से nested हो जिसमें `overflow: hidden` हो, तो वह कट जाएगा। इसे portal के माध्यम से `body` में render करना पूरी तरह से इससे बचाता है। ## Events अभी भी React tree को follow करते हैं यह सूक्ष्म, शक्तिशाली भाग है: भले ही modal का DOM `body` के अंदर रहता हो, फिर भी React ancestor पर `onClick` fire होता है, क्योंकि **event bubbling React tree को follow करती है, DOM tree को नहीं**: ```jsx

{/* still fires for clicks inside the portal */} ...

``` ## Accessibility को न भूलें एक portal *positioning* को हल करता है, *a11y* को नहीं। Dialogs के लिए आपको अभी भी focus trapping, `role="dialog"`/`aria-modal`, और Escape-to-close की आवश्यकता है (या native `