ਇੱਕ portal ਬੱਚਿਆਂ ਨੂੰ DOM ਦੀ ਇੱਕ ਵੱਖਰੀ ਥਾਂ (ਮਾਤਾ-ਪਿਤਾ ਦੀ DOM ਹਰਾਰਤ ਦੇ ਬਾਹਰ) ਵਿੱਚ render ਕਰਦਾ ਹੈ, ਪਰ ਉਹਨਾਂ ਨੂੰ React ਦੇ component tree ਵਿੱਚ ਰੱਖਦਾ ਹੈ — ਇਸ ਲਈ context, props, ਅਤੇ events ਅਜੇ ਵੀ ਉਵੇਂ ਹੀ ਕਾਮ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਉਹ ਆਮ ਤੌਰ 'ਤੇ nested ਹੋਣ।
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, ਅਤੇ toasts ਨੂੰ ਆਪਣੇ ਆਪ ਨੂੰ ਇੱਕ ancestor ਦੇ overflow: hidden ਜਾਂ z-index stacking context ਤੋਂ ਬਾਹਰ ਕੱਢਣਾ ਚਾਹੀਦਾ ਹੈ। ਜੇ modal ਇੱਕ card ਦੇ ਅੰਦਰ overflow: hidden ਦੇ ਨਾਲ ਡੂੰਘਾ nested ਸੀ, ਤਾਂ ਇਹ clip ਹੋ ਜਾਵੇਗਾ। Portal ਦੁਆਰਾ ਇਸ ਨੂੰ body ਨੂੰ render ਕਰਨਾ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕ ਦਿੰਦਾ ਹੈ।
ਇਹ ਸੂਖਮ, ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਿੱਸਾ ਹੈ: ਭਾਵੇਂ modal ਦਾ DOM body ਦੇ ਅਧੀਨ ਰਹਿੰਦਾ ਹੈ, ਇੱਕ React ancestor 'ਤੇ onClick ਅਜੇ ਵੀ fire ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ event bubbling React tree ਨੂੰ follow ਕਰਦਾ ਹੈ, DOM tree ਨੂੰ ਨਹੀਂ:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
ਇੱਕ portal positioning ਨੂੰ solve ਕਰਦਾ ਹੈ, a11y ਨੂੰ ਨਹੀਂ। Dialogs ਲਈ ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ focus trapping, role="dialog"/aria-modal, ਅਤੇ Escape-to-close ਦੀ ਲੋੜ ਹੈ (ਜਾਂ native <dialog> element ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਇਸ ਵਿੱਚੋਂ ਬਹੁਤ ਸਾਰੇ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ)।