React Academy · Lektion

Mönstret render props

Skicka en funktion som prop och låt den returnera JSX för att dela beteende utan att koppla ihop UI.

Lektion 1 av 413 steg

Mönstret render props ä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 du dig render props-mönstret – att skicka en funktion som prop och låta den returnera JSX – samt när det är användbart för att dela beteende mellan komponenter.

Vad är render props?

Render props är ett mönster där en komponent tar emot en prop som är en funktion. Komponenten anropar funktionen för att skapa sitt renderade resultat. Konsumenten styr användargränssnittet, medan komponenten tillhandahåller beteendet.

<DataProvider render={data => <UserCard user={data} />} />

Enkelt exempel på render props

En Toggle-komponent hanterar tillståndet öppet/stängt och anropar en render prop med det aktuella tillståndet och en funktion för att växla tillståndet. Konsumenten bestämmer hur det ska renderas.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Använda children som render prop

I stället för en namngiven render prop kan du använda `children` som en funktion. Många bibliotek (React Router v5, Formik) använder detta mönster – det kallas ibland 'children as a function'.

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Spåra muspekarens position

Ett klassiskt exempel på render props: en MouseTracker-komponent spårar muspekarens position och skickar den till en render prop. Alla konsumenter kan visa positionen på det sätt de själva vill.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Render props jämfört med anpassade hooks

Render props var standardmönstret innan hooks introducerades. Anpassade hooks gör nu samma sak på ett renare sätt: hooken returnerar data och funktioner, och komponenten använder dem i sin egen JSX. Hooks rekommenderas i modern React.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

När render props fortfarande passar

Render props är fortfarande användbara när: (1) du behöver lägga in dynamisk rendering på en specifik plats i komponentträdet, (2) du bygger ett headless-komponentbibliotek som separerar logik från användargränssnitt.

Prestandavarning

Om du definierar en render prop inline skapas en ny funktion vid varje rendering av föräldern, vilket hindrar underordnade PureComponent/React.memo-komponenter från att hoppa över omrendering. Extrahera render prop-funktioner till en stabil variabel eller metod.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Kombinera render props

Om du nästlar flera render-prop-komponenter skapas snabbt 'render prop-kaos' eller 'wrapper-kaos' – djupt nästlade callbacks som är svåra att läsa. Det är en av anledningarna till att hooks introducerades.

Render props i bibliotek

React Router v5 använde render props för Route. Downshift, Formik och React-Table använder också olika varianter. Om du förstår render props blir det lättare att läsa och felsöka kod som använder dessa bibliotek.

Snabbkontroll

Vad är den främsta fördelen med render props-mönstret jämfört med att skicka statisk JSX?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Render props skickar en funktion som returnerar JSX. Komponenten tillhandahåller beteendet, och konsumenten tillhandahåller användargränssnittet. Föredra anpassade hooks i modern React, men förstå render props så att du kan läsa befintlig kod och bygga headless-komponenter.

Nästa steg

Nästa lektion: **Higher-Order Components (HOCs) Explained** – du kommer att wrappa komponenter för att injicera props, skydda routes eller lägga till loggning.

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 ”Mönstret render props” gratis?

Ja – hela texten till ”Mönstret render props” 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 ”Mönstret render props”?

Skicka en funktion som prop och låt den returnera JSX för att dela beteende utan att koppla ihop UI. 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 ”Mönstret render props”?

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

Mönstret render props
Higher-Order Components (HOCs) förklarade
HOC jämfört med render props och custom hooks
Refaktorera en HOC till en custom hook

← Tillbaka till React Academy