Portal renderira otroke na drugo mesto v DOM-u (zunaj hierarhije DOM-a roditelja), hkrati pa jih obdrži v Reactovem drevesu komponent — zato kontekst, prostore in dogodki še vedno delujejo, kot da bi bili normalno vgnezdeni.
{ createPortal } ;
() {
(
,
.()
);
}
Modalni okni, napotki, spustni seznami in obvestila morajo izstopiti iz overflow: hidden ali z-index konteksta zlaganja prednika. Če bi bil modalni okno vgnezdeno globoko znotraj kartice z overflow: hidden, bi bilo odrezano. Prikaz na body preko portala to povsem preprečи.
To je subtilni, zmogljiv del: čeprav DOM modalnega okna živi pod body, se onClick na Reactovem predniku še vedno sproži, ker mehurčenje dogodkov sledi Reactovemu drevesu, ne drevesu DOM-a:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal rešuje pozicioniranje, ne dostopnosti. Za pogovorna okna še vedno potrebujete ujemanje fokusa, role="dialog"/aria-modal in Escape-za-zapreti (ali uporabite nadomeščeni element <dialog>, ki obravnava večino tega).