React Academy · Lektion

Hvad er React Portals

Forstå createPortal-API'en, og hvorfor det er nyttigt at rendere uden for root-div'en.

Lektion 1 af 413 trin

Hvad er React Portals er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du, hvad React-portaler er, hvorfor det er nyttigt at rendere uden for det overordnede DOM-træ, og hvordan du bruger createPortal-API'et.

Det normale React-DOM-hierarki

Som standard rendere hver komponent inde i sin overordnede DOM-node. Hele React-appen ligger normalt inde i én `

`. Det fungerer fint, indtil du har brug for en modal, et værktøjstip eller en rullemenu, der skal kunne undslippe en overordnet node med `overflow: hidden`.

Hvad er en portal?

En **portal** lader dig rendere en komponents output i en anden DOM-node – en node, der findes uden for React-roden. Komponentens React-træ er uændret; kun placeringen i DOM'en ændres.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Hvorfor findes der portaler?

CSS-egenskaber som `overflow: hidden`, stablingskontekster med `z-index` og `transform` på en overordnet node kan beskære eller skjule underordnede elementer. Portaler undslipper disse begrænsninger ved at knytte det renderede output til en anden DOM-node.

Hændelses-bobling fungerer stadig

Selvom portalens DOM-node ligger uden for den overordnede node, **bobler React-hændelser stadig** gennem React-komponenttræet – ikke DOM-træet. Et klik i en modal, der bruger en portal, bobler op til dens React-overordnede komponent.

Oprettelse af et portalmål

Du kan oprette en portal i enhver eksisterende DOM-node. Et almindeligt mønster er at tilføje en dedikeret `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Portalens livscyklus er knyttet til dens React-overordnede komponent

En portal monteres, når dens overordnede komponent monteres, og afmonteres, når den overordnede komponent afmonteres. React holder stadig styr på den som en del af det samme komponenttræ, så kontekst og refs fungerer normalt.

Kontekst fungerer på tværs af portaler

Fordi portaler stadig er en del af React-komponenttræet, er kontekstværdier, der leveres over portalen, stadig tilgængelige inde i portalen. DOM-placeringen påvirker ikke React-kæden for kontekst.

Brug af createPortal med tilstand

Styr portalens synlighed med en tilstandsvariabel. Skift den med en knap, så portalindholdet vises i document.body, mens knappen bliver på sin normale DOM-placering.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Rendring på serversiden og portaler

Portaler kræver, at der findes en DOM-node, så de kører altid på klientsiden. I Next.js eller andre SSR-opsætninger skal du sikre, at koden, der renderer portalen, kun kører i browseren ved hjælp af `useEffect` eller et tjek af, om komponenten er monteret.

Hurtigt tjek

React-portaler renderer indhold i en anden DOM-node. Hvilket aspekt af React-komponenttræet påvirkes af dette?

Besvar den i den interaktive lektion

Opsummering

Portaler lader dig rendre React-output i enhver DOM-node ved hjælp af createPortal(). React-træet, kontekst og hændelses-bobling påvirkes ikke. Brug dem til at undslippe begrænsninger fra overflow og z-index for modaler og værktøjstip.

Det næste

Næste lektion: **Opbygning af en modal-komponent med portaler** – du opbygger en modal, der kan genbruges fuldt ud, og som bruger en portal til document.body med håndtering af tilstand for åbning og lukning.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Hvad er React Portals” gratis?

Ja — hele teksten til “Hvad er React Portals” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Hvad er React Portals”?

Forstå createPortal-API'en, og hvorfor det er nyttigt at rendere uden for root-div'en. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Hvad er React Portals”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Hvad er React Portals
Opbygning af en modal-komponent med Portals
Håndtering af fokus og tastaturfælder i modaler
Tooltips og dropdown-menuer med Portals

← Tilbage til React Academy