Portal vykresluje podřízené prvky na jiné místo v DOM (mimo DOM hierarchii rodiče), zatímco je udržuje v React stromu komponent — takže kontext, vlastnosti a události fungují, jako by byly vnořeny normálně.
{ createPortal } ;
() {
(
,
.()
);
}
Modály, tooltips, rozbalovací nabídky a upozornění musí vyhnout se předkovi s overflow: hidden nebo z-index vrstvením kontextu. Pokud by byl modál vnořen hluboko uvnitř karty s overflow: hidden, byl by oříznut. Vykreslení do body přes portal se tomu zcela vyhne.
Toto je jemná a výkonná část: i když je DOM modálu umístěn pod body, onClick na React předkovi stále spustí, protože bublinování událostí sleduje React strom, ne DOM strom:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal řeší umístění, ne a11y. Pro dialogy stále potřebujete zachytávání fokusu, role="dialog"/aria-modal a Escape-to-close (nebo použijte nativní prvek <dialog>, který zvládá mnoho z toho).