Vad är React portaler och när är de användbara?

Question

IT Interview Practice · Accepted Answer

En **portal** renderar barn till en **annan plats i DOM:en** (utanför förälderns DOM-hierarki), medan den behålls i Reacts komponentträd — så kontext, props och events fungerar fortfarande som om de var kapslade normalt. ```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") ); } ``` ## Varför det behövs Modaler, tooltips, listrutor och toasts måste **undvika** en förfaders `overflow: hidden` eller `z-index` stackningskontext. Om modalen vore kapslad djupt inuti ett kort med `overflow: hidden` skulle den klippas av. Genom att rendera den till `body` via en portal undviker du det helt. ## Events följer fortfarande React-trädet Detta är den subtila, kraftfulla delen: även om modalens DOM lever under `body`, skjuts en `onClick` på en React-förfader fortfarande, eftersom **event bubbling följer React-trädet, inte DOM-trädet**: ```jsx

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

``` ## Glöm inte tillgänglighet En portal löser *positionering*, inte *a11y*. För dialoger behöver du fortfarande fokusöverordning, `role="dialog"`/`aria-modal` och Escape-för-stänga (eller använd det inbyggda `

Varför det behövs

Events följer fortfarande React-trädet

Glöm inte tillgänglighet

Relaterade frågor