Portal renderuje elementy potomne w innym miejscu w DOM (poza hierarchią DOM rodzica), zachowując je jednocześnie w drzewie komponentów React — dzięki czemu kontekst, props i zdarzenia działają tak, jakby były zagnieżdżone normalnie.
{ createPortal } ;
() {
(
,
.()
);
}
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
WesprzyjModale, tooltipsy, rozwijane menu i powiadomienia muszą uciec z kontekstu overflow: hidden lub z-index przodka. Jeśli modal byłby zagnieżdżony głęboko wewnątrz karty z overflow: hidden, zostałby obcięty. Renderowanie go do body za pomocą portalu całkowicie to eliminuje.
To jest subtelna, potężna część: chociaż DOM modala znajduje się pod body, onClick na przodku React nadal się uruchamia, ponieważ propagacja zdarzeń podąża za drzewem React, a nie drzewem DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Portal rozwiązuje pozycjonowanie, nie a11y. Dla dialogów nadal potrzebny jest trap fokusa, role="dialog"/aria-modal oraz Escape-to-close (lub użyj natywnego elementu <dialog> który obsługuje większość tego).