Sebuah portal merender anak-anak ke tempat berbeda di DOM (di luar hierarki DOM induk), namun tetap berada di pohon komponen React — jadi context, props, dan events tetap bekerja seolah-olah mereka bersarang secara normal.
{ createPortal } ;
() {
(
,
.()
);
}
Modal, tooltip, dropdown, dan toast harus lolos dari konteks stacking overflow: hidden atau z-index leluhur. Jika modal bersarang dalam kartu dengan overflow: hidden, modal akan terpotong. Merender melalui portal ke body menghindari ini sepenuhnya.
Ini adalah bagian yang halus dan kuat: meskipun DOM modal berada di bawah body, onClick pada leluhur React tetap mengeluarkan, karena event bubbling mengikuti pohon React, bukan pohon DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal menyelesaikan positioning, bukan a11y. Untuk dialog Anda masih memerlukan focus trapping, role="dialog"/aria-modal, dan Escape-to-close (atau gunakan elemen native <dialog> yang menangani banyak dari ini).