Mik a React portalok és mikor hasznosak?

Question

Accepted Answer

Egy **portal** a gyermekeket a DOM-ban egy **másik helyre** rendereli (a szülő DOM-hierarchiáján kívülre), de még mindig a React komponensfában maradnak — tehát a context, props és events úgy működnek, mintha normálisan lennének beágyazva. ```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") ); } ``` ## Miért van rá szükség A modálok, tooltipek, legördülő listák és toastok **ki kell menekülniük** az ős `overflow: hidden` vagy `z-index` stacking kontextusából. Ha a modál mélyen egy `overflow: hidden` kártyán belülre lenne beágyazva, levágódna. A portal segítségével történő `body`-ra renderelés ezt teljes egészében elkerüli. ## Az események még mindig a React fát követik Ez a finoman csiszolatlan, erős rész: még akkor is, ha a modál DOM-ja a `body` alatt él, a React ős `onClick` továbbra is aktiválódik, mivel az **esemény buborékzás a React fát követi, nem a DOM fát**: ```jsx

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

``` ## Ne felejtse el az akadálymentesítést Egy portal *pozicionálást* old meg, nem *a11y*-t. A párbeszédekhez még mindig szüksége van fókusz zárolásra, `role="dialog"`/`aria-modal` és Escape-to-close funkcióra (vagy használja a natív `