Sebuah portal me-render anak komponen ke dalam tempat yang berbeza dalam DOM (di luar hierarki DOM induknya), sambil mengekalkannya dalam pokok komponen React — jadi context, props, dan acara (events) masih berfungsi seolah-olah ia bersarang secara normal.
{ createPortal } ;
() {
(
,
.()
);
}
Modal, tooltip, dropdown, dan toast mesti terlepas daripada overflow: hidden atau konteks penyusunan z-index sesuatu nenek moyang. Jika modal itu bersarang dalam-dalam di dalam sesuatu kad dengan overflow: hidden, ia akan terpotong. Me-render-nya ke body melalui sesuatu portal mengelakkan perkara itu sepenuhnya.
Inilah bahagian yang halus lagi berkuasa: walaupun DOM modal itu wujud di bawah body, sesuatu onClick pada nenek moyang React masih dipicu, kerana gelembung acara (event bubbling) mengikut pokok React, bukan pokok DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Sesuatu portal menyelesaikan kedudukan, bukan a11y. Untuk dialog anda masih memerlukan pemerangkapan fokus (focus trapping), role="dialog"/aria-modal, dan Escape-untuk-tutup (atau gunakan elemen <dialog> natif yang mengendalikan kebanyakan perkara ini).