React Academy · Lektion

Mønsteret Render Props

Videregiv en funktion som prop, der returnerer JSX, for at dele adfærd uden at koble brugerfladen tæt sammen.

Lektion 1 af 413 trin

Mønsteret Render Props 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 render props-mønsteret at kende — du sender en funktion som prop, der returnerer JSX — og lærer, hvornår det er nyttigt til at dele adfærd mellem komponenter.

Hvad er Render Props

Render props er et mønster, hvor en komponent modtager en prop, der er en funktion. Komponenten kalder funktionen for at producere sit renderede resultat. Den komponent, der bruger den, styrer brugerfladen; komponenten leverer adfærden.

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

Enkelt eksempel på en Render Prop

En Toggle-komponent håndterer tilstanden åben/lukket og kalder en render prop med den aktuelle tilstand og en skiftefunktion. Den komponent, der bruger den, bestemmer, hvordan den skal rendere.

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

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

Brug af children som Render Prop

I stedet for en navngiven render prop kan du bruge `children` som en funktion. Mange biblioteker (React Router v5, Formik) bruger dette mønster — det kaldes nogle gange mønsteret „børn som funktion“.

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

Sporing af museposition

Et klassisk eksempel på render props: en MouseTracker-komponent sporer markørens position og giver den videre til en render prop. Enhver komponent, der bruger den, kan vise positionen på den ønskede måde.

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 kontra brugerdefinerede hooks

Render props var det foretrukne mønster før hooks. Brugerdefinerede hooks gør nu det samme mere enkelt: hooket returnerer data og funktioner, og komponenten bruger dem i sin egen JSX. Hooks foretrækkes i moderne React.

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

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

Hvornår giver Render Props stadig mening

Render props er stadig nyttige, når: (1) du har brug for at indsætte dynamisk gengivelse på en bestemt placering i træet, (2) du bygger et headless-komponentbibliotek, der adskiller logik fra brugerflade.

Ydelsesadvarsel

Når du definerer en render prop inline, oprettes der en ny funktion ved hver rendering af den overordnede komponent, hvilket forhindrer underordnede PureComponent/React.memo-komponenter i at springe rendering over. Udtræk render prop-funktioner til en stabil variabel eller metode.

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

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

Sammensætning af Render Props

Indlejring af flere render prop-komponenter skaber hurtigt „render prop-helvede“ eller „wrapper-helvede“ — dybt indlejrede callback-funktioner, der er svære at læse. Det er en af grundene til, at hooks blev introduceret.

Render Props i biblioteker

React Router v5 brugte render props til Route. Downshift, Formik og React-Table bruger også varianter. Hvis du forstår render props, bliver det lettere at læse og fejlfinde kode, der bruger disse biblioteker.

Hurtigt tjek

Hvad er den største fordel ved render props-mønsteret sammenlignet med at sende statisk JSX?

Besvar den i den interaktive lektion

Opsummering

Render props sender en funktion, der returnerer JSX. Komponenten leverer adfærd; den komponent, der bruger den, leverer brugerfladen. Foretræk brugerdefinerede hooks i moderne React, men forstå render props, så du kan læse eksisterende kode og bygge headless-komponenter.

Næste trin

Næste lektion: **Komponenter af højere orden (HOC'er) forklaret** — du indpakker komponenter for at indsætte props, beskytte ruter eller tilføje logning.

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 “Mønsteret Render Props” gratis?

Ja — hele teksten til “Mønsteret Render Props” 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 “Mønsteret Render Props”?

Videregiv en funktion som prop, der returnerer JSX, for at dele adfærd uden at koble brugerfladen tæt sammen. 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 “Mønsteret Render Props”?

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

Mønsteret Render Props
Higher-Order Components (HOCs) forklaret
HOC vs. Render Props vs. Custom Hooks
Refaktorering af en HOC til en Custom Hook

← Tilbage til React Academy