React Academy · Lektion

Vad är React Portals?

Förstå createPortal-API:t och varför det är användbart att rendera utanför root-div:en.

Lektion 1 av 413 steg

Vad är React Portals? är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen lär Ni Er vad React Portals är, varför det kan vara användbart att rendera utanför det överordnade DOM-trädet och hur API:t createPortal används.

Den normala React-DOM-hierarkin

Som standard renderas varje komponent inuti sin överordnade komponents DOM-nod. Hela React-appen finns vanligtvis inuti en `

`. Det fungerar bra tills en modal, ett tooltip eller en rullgardinsmeny behöver ta sig ut ur en överordnad nod med `overflow: hidden`.

Vad är en Portal?

En **Portal** låter Er rendera en komponents resultat i en annan DOM-nod – en nod som finns utanför React-roten. Komponentens React-träd förblir oförändrat; endast DOM-positionen ändras.

import { createPortal } from 'react-dom';

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

Varför Portals finns

CSS-egenskaper som `overflow: hidden`, staplingskontexter med `z-index` och `transform` på en överordnad nod kan klippa eller dölja underordnade element. Portals kringgår dessa begränsningar genom att koppla det renderade resultatet till en annan DOM-nod.

Händelsebubbling fungerar fortfarande

Även om portalens DOM-nod ligger utanför den överordnade noden **bubblar React-händelser fortfarande** genom React-komponentträdet – inte DOM-trädet. Ett klick inuti en modal som använder en portal bubblar upp till dess React-förälder.

Skapa ett mål för en Portal

En Portal kan användas i vilken befintlig DOM-nod som helst. Ett vanligt mönster är att lägga till en dedikerad `

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

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

Portalens livscykel är kopplad till dess React-förälder

En Portal monteras när dess överordnade komponent monteras och avmonteras när den överordnade komponenten avmonteras. React spårar den fortfarande som en del av samma komponentträd, så kontext och refs fungerar normalt.

Kontext fungerar över Portals

Eftersom Portals fortfarande är en del av React-komponentträdet är kontextvärden som tillhandahålls ovanför portalen fortfarande tillgängliga inuti den. DOM-positionen påverkar inte Reacts kontextkedja.

Använda createPortal med tillstånd

Styr portalens synlighet med en tillståndsvariabel. Växla den med en knapp så visas portalinnehållet i document.body, medan knappen behåller sin normala DOM-position.

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>
  );
}

Serverrendering och Portals

Portals kräver att en DOM-nod finns och körs därför alltid på klientsidan. I Next.js eller andra SSR-miljöer bör portalens renderingskod köras endast i webbläsaren, med hjälp av `useEffect` eller en kontroll av monterat tillstånd.

Snabbkontroll

React Portals renderar innehåll i en annan DOM-nod. Vilken del av React-komponentträdet påverkas av detta?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Med Portals kan React-resultat renderas i valfri DOM-nod med hjälp av createPortal(). React-trädet, kontexten och händelsebubblingen påverkas inte. Använd dem för att kringgå begränsningar med overflow och z-index för modaler och tooltips.

Härnäst

Nästa lektion: **Bygga en Modal-komponent med Portals** – Ni kommer att bygga en helt återanvändbar modal som renderas i document.body med hjälp av en Portal och hantering av öppnings- och stängningstillstånd.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Vad är React Portals?” gratis?

Ja – hela texten till ”Vad är React Portals?” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Vad är React Portals?”?

Förstå createPortal-API:t och varför det är användbart att rendera utanför root-div:en. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Vad är React Portals?”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Vad är React Portals?
Bygga en modal komponent med Portals
Hantera fokus och tangentbordsfällor i modaler
Tooltips och rullgardinsmenyer med Portals

← Tillbaka till React Academy