React Academy · Lektion

Render-Props-Pattern

Übergeben Sie eine Funktion als Prop, die JSX zurückgibt, um Verhalten ohne eine enge Kopplung an die UI zu teilen.

Render-Props-Pattern ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie das Render-Props-Muster kennen – dabei wird eine Funktion als Prop übergeben, die JSX zurückgibt – und erfahren, wann es sich zum Teilen von Verhalten zwischen Komponenten eignet.

Was sind Render Props?

Render Props sind ein Muster, bei dem eine Komponente ein Prop akzeptiert, das eine Funktion ist. Die Komponente ruft diese Funktion auf, um ihre gerenderte Ausgabe zu erzeugen. Der Consumer steuert die UI, während die Komponente das Verhalten bereitstellt.

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

Einfaches Beispiel für ein Render Prop

Eine Toggle-Komponente verwaltet den Zustand „geöffnet/geschlossen“ und ruft ein Render Prop mit dem aktuellen Zustand und einer Umschaltfunktion auf. Der Consumer entscheidet, wie die Ausgabe gerendert wird.

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

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

children als Render Prop verwenden

Statt eines benannten Render Props können Sie `children` als Funktion verwenden. Viele Bibliotheken (React Router v5, Formik) nutzen dieses Muster – manchmal wird es „children as a function“ genannt.

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

Mauspositions-Tracker

Ein klassisches Beispiel für Render Props: Eine MouseTracker-Komponente verfolgt die Cursorposition und übergibt sie an ein Render Prop. Jeder Consumer kann die Position auf beliebige Weise anzeigen.

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 im Vergleich zu Custom Hooks

Render Props waren vor der Einführung der Hooks das bevorzugte Muster. Custom Hooks erledigen heute dasselbe auf sauberere Weise: Der Hook gibt Daten und Funktionen zurück, und die Komponente verwendet sie in ihrem eigenen JSX. In modernem React werden Hooks bevorzugt.

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

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

Wann Render Props weiterhin sinnvoll sind

Render Props sind weiterhin nützlich, wenn: (1) Sie dynamisches Rendering an einer bestimmten Stelle im Komponentenbaum einfügen müssen oder (2) Sie eine Headless-Komponentenbibliothek entwickeln, die Logik und UI voneinander trennt.

Leistungswarnung

Wenn Sie ein Render Prop inline definieren, wird bei jedem Rendern der übergeordneten Komponente eine neue Funktion erstellt. Dadurch können untergeordnete PureComponent-/React.memo-Komponenten das erneute Rendern nicht überspringen. Lagern Sie Render-Prop-Funktionen in eine stabile Variable oder Methode aus.

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

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

Render Props kombinieren

Durch das Verschachteln mehrerer Render-Prop-Komponenten entsteht schnell eine „Render-Prop-Hölle“ oder „Wrapper-Hölle“ – tief verschachtelte Callbacks, die schwer zu lesen sind. Das ist ein Grund, warum Hooks eingeführt wurden.

Render Props in Bibliotheken

React Router v5 verwendete Render Props für Route. Auch Downshift, Formik und React-Table nutzen Varianten davon. Wenn Sie Render Props verstehen, können Sie Code, der diese Bibliotheken verwendet, leichter lesen und debuggen.

Kurzer Test

Was ist der wichtigste Vorteil des Render-Props-Musters gegenüber der Übergabe von statischem JSX?

Zusammenfassung

Render Props übergeben eine Funktion, die JSX zurückgibt. Die Komponente stellt das Verhalten bereit, der Consumer die UI. Bevorzugen Sie in modernem React Custom Hooks, aber verstehen Sie Render Props, um bestehenden Code zu lesen und Headless-Komponenten zu entwickeln.

Als Nächstes

Nächste Lektion: **Higher-Order Components (HOCs) erklärt** – Sie werden Komponenten umschließen, um Props einzuschleusen, Routes zu schützen oder Logging hinzuzufügen.

Häufig gestellte Fragen

Ist die Lektion „Render-Props-Pattern“ kostenlos?

Ja — der vollständige Text von „Render-Props-Pattern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Render-Props-Pattern“?

Übergeben Sie eine Funktion als Prop, die JSX zurückgibt, um Verhalten ohne eine enge Kopplung an die UI zu teilen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Render-Props-Pattern“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy