Mitä ovat React portaalit ja milloin ne ovat hyödyllisiä?

Question

Accepted Answer

**Portaali** renderöi lapset **eri paikkaan DOM:issa** (vanhemman DOM-hierarkian ulkopuolelle), mutta pitää ne React-komponenttipuussa — joten konteksti, propsit ja tapahtumat toimivat ikään kuin ne olisivat normaalisti sisäkkäisiä. ```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") ); } ``` ## Miksi sitä tarvitaan Modaalit, työkaluvihjeet, pudotusvalikot ja ilmoitukset on **pakotettava** poistumaan esi-isän `overflow: hidden` tai `z-index` pinousmerkityksestä. Jos modaali olisi sisäkkäinen syvällä kortissa, jossa on `overflow: hidden`, se leikkaantuisi. Sen renderöinti `body`-un kautta portaalin avulla välttää tämän kokonaan. ## Tapahtumat seuraavat edelleen React-puuta Tämä on hieno ja tehokas osa: vaikka modaalin DOM elää `body`-n alla, React-esi-isän `onClick` laukeaa silti, koska **tapahtumien kupliminen seuraa React-puuta, ei DOM-puuta**: ```jsx

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

``` ## Älä unohda saavutettavuutta Portaali ratkaisee *sijoittelun*, ei *a11y*. Dialogeissa tarvitset edelleen fokuksen kaappaamisen, `role="dialog"`/`aria-modal` ja Escape-to-close (tai käytä natiivi `