ایک portal بچوں کو DOM میں ایک مختلف جگہ (والد کی DOM ہائراکی کے باہر) میں render کرتا ہے، لیکن انہیں React کے component tree میں رکھتا ہے — تو context، props، اور events اب بھی اسی طرح کام کرتے ہیں جیسے وہ عام طریقے سے nested ہوں۔
{ createPortal } ;
() {
(
,
.()
);
}
Modals، tooltips، dropdowns، اور toasts کو ایک ancestor کے overflow: hidden یا z-index stacking context سے نکل جانا ہوگا۔ اگر modal overflow: hidden والے card کے اندر گہرائی سے nested ہوتا، تو یہ cut ہو جاتا۔ Portal کے ذریعے body میں render کرنا اس کو مکمل طور پر روک دیتا ہے۔
یہ subtly طاقتور حصہ ہے: اگرچہ 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 استعمال کریں جو بہت کچھ سنبھال لیتا ہے)۔