portal จะแสดงผลลูกไปยัง ตำแหน่งอื่นใน DOM (นอกลำดับชั้น DOM ของผู้ปกครอง) ในขณะที่รักษามันไว้ในแผนผังคอมโพเนนต์ React — ดังนั้น context, props และเหตุการณ์จึงยังคงทำงานเหมือนกับว่าพวกมันถูกซ้อนปกติ
{ createPortal } ;
() {
(
,
.()
);
}
โมดัล ツールทิป ดรอปดาวน์ และ toasts ต้อง หลบหนี จาก overflow: hidden ของบรรพชนหรือบริบท z-index stacking หากโมดัลถูกซ้อนอยู่ลึกภายในการ์ดที่มี overflow: hidden มันจะถูกตัด การแสดงผลไปยัง body ผ่าน portal จะหลีกเลี่ยงสิ่งนั้นอย่างสมบูรณ์
นี่คือส่วนที่ลึกซึ้งและทรงพลัง: แม้ว่า DOM ของโมดัลจะอยู่ใต้ body แต่ onClick บนบรรพชน React ยังคงทำให้เกิด เพราะว่า event bubbling ตามแผนผัง React ไม่ใช่แผนผัง DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
portal แก้ไข positioning ไม่ใช่ a11y สำหรับกล่องโต้ตอบคุณยังต้องใช้ focus trapping, role="dialog"/aria-modal และ Escape-to-close (หรือใช้องค์ประกอบ <dialog> แบบเนทีฟซึ่งจัดการได้มากมาย)