Što su React portali i kada su korisni?

Question

Accepted Answer

**portal** renderira djecu na **drugom mjestu u DOM-u** (izvan roditeljske DOM hijerarhije), ali ostaju u React stablu komponenti — zato context, props i eventi funkcioniraju kao da su normalno ugniježđeni. ```jsx import { createPortal } from "react-dom"; function Modal({ children, onClose }) { // renders into

at the end of , // NOT inside whatever component called return createPortal(

{children}

, document.getElementById("modal-root") ); } ``` ## Zašto je potreban Modali, savjeti, padajući popisi i obavijesti moraju **izbjeći** `overflow: hidden` ili `z-index` stacking kontekst pretka. Ako je modal ugniježđen duboko u kartici sa `overflow: hidden`, bit će odrezan. Renderiranje ga na `body` putem portala to potpuno izbjegava. ## Eventi i dalje slijede React stablo Ovo je suptilni, moćni dio: iako DOM modala živi ispod `body`, `onClick` na React pretku i dalje se aktivira, jer **propagacija događaja slijedi React stablo, ne DOM stablo**: ```jsx

{/* still fires for clicks inside the portal */} ...

``` ## Ne zaboravite pristupačnost Portal rješava *pozicioniranje*, ne *a11y*. Za dijaloge još trebate `focus trapping`, `role="dialog"`/`aria-modal` i Escape-za-zatvaranje (ili koristite native `