একটি portal চাইল্ড এলিমেন্টগুলিকে DOM-এ একটি ভিন্ন জায়গায় রেন্ডার করে (প্যারেন্টের DOM হায়ারার্কির বাইরে), তবে সেগুলি React-এর কম্পোনেন্ট ট্রিতে থাকে — তাই context, props এবং ইভেন্টগুলি এমনভাবে কাজ করে যেন সেগুলি সাধারণভাবে নেস্টেড রয়েছে।
{ createPortal } ;
() {
(
,
.()
);
}
মডাল, টুলটিপ, ড্রপডাউন এবং টোস্টগুলি একটি অ্যানসেস্টরের overflow: hidden বা z-index স্ট্যাকিং context-এ এসকেপ করতে হবে। যদি মডালটি overflow: hidden সহ একটি কার্ডের ভিতরে গভীরভাবে নেস্টেড থাকে, তা ক্লিপ হয়ে যাবে। portal-এর মাধ্যমে body-তে এটি রেন্ডার করা এটি সম্পূর্ণভাবে এড়ায়।
এটি সূক্ষ্ম এবং শক্তিশালী অংশ: যদিও মডালের DOM body-এর অধীনে থাকে, একটি React অ্যানসেস্টরে onClick এখনও ফায়ার হয়, কারণ ইভেন্ট বাবলিং React ট্রি অনুসরণ করে, DOM ট্রি নয়:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
পোর্টাল পজিশনিং সমাধান করে, কিন্তু a11y নয়। ডায়ালগের জন্য আপনার এখনও ফোকাস ট্র্যাপিং, role="dialog"/aria-modal এবং Escape-টু-ক্লোজ প্রয়োজন (অথবা নেটিভ <dialog> এলিমেন্ট ব্যবহার করুন যা এর অনেক কিছু পরিচালনা করে)।