Bir portal, çocukları DOM içinde farklı bir yere (ebeveynin DOM hiyerarşisinin dışında) renderlar, ancak React bileşen ağacında tutarlar — bu nedenle bağlam (context), props ve olaylar normal şekilde iç içe geçmiş gibi çalışmaya devam eder.
{ createPortal } ;
() {
(
,
.()
);
}
Modaller, tooltip'ler, açılır menüler ve toast'lar bir atasının overflow: hidden veya z-index yığınlama bağlamından kaçmalıdır. Modal, overflow: hidden olan bir kartın içinde derin bir şekilde iç içe olsaydı, kesilirdi. Portal aracılığıyla body öğesine renderlamak bunu tamamen engeller.
Bu, ince ve güçlü olan kısmı: Modal'ın DOM'u body altında yaşasa bile, React atasında onClick yine de tetiklenir, çünkü olay baloncuklaması React ağacını takip eder, DOM ağacını değil:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal konumlandırmayı çözer, a11y değil. İletişim kutuları için yine de odak yakalama, role="dialog"/aria-modal ve Escape-to-close gerekir (veya bunun çoğunu işleyen yerel <dialog> öğesini kullanın).