React Academy · Lektion

Grundlagen von props.children

Übergeben Sie JSX als Children, rendern Sie einzelne oder mehrere Children und steuern Sie deren bedingte Darstellung.

Grundlagen von props.children 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, wie Sie JSX als children übergeben, einzelne und mehrere children rendern und children in React-Komponenten bedingt rendern.

Das children-Prop

JSX, das zwischen den öffnenden und schließenden Tags einer Komponente steht, ist automatisch als `props.children` verfügbar. So erstellen Sie Wrapper- oder Layout-Komponenten.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card><p>Hello world</p></Card>

Einzelne und mehrere children

Wenn Sie ein einzelnes child übergeben, ist `children` ein React-Element. Wenn Sie mehrere children übergeben, ist `children` ein Array. Das Verhalten hängt von der Anzahl der übergebenen children ab.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Children direkt rendern

Die einfachste Verwendung von children besteht darin, sie direkt innerhalb von JSX zu rendern. Das übergeordnete Element steuert Layout und Styling, der Consumer den Inhalt.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Children bedingt rendern

Prüfen Sie vor dem Rendern, ob children übergeben wurde. Eine Komponente kann einen Fallback bereitstellen, wenn keine children vorhanden sind.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Children als Render Prop

Children kann auch eine **Funktion** sein (Render-Prop-Muster). Das übergeordnete Element ruft sie mit Daten auf, und der Consumer steuert das Rendern. Dies ist ein älteres Muster – heute ersetzen es häufig Custom Hooks.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Children als Prop übergeben

Children muss nicht den speziellen `{children}`-Slot verwenden. Sie können JSX über einen beliebigen Prop-Namen übergeben. Das ist die Grundlage benannter Slots.

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

Standardmäßige children

Sie können Standard-children mithilfe der JavaScript-Syntax für Standardparameter beim Destructuring festlegen. Wenn das übergeordnete Element nichts übergibt, wird der Standardinhalt angezeigt.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Fragments und mehrere children

Um mehrere Elemente ohne ein umschließendes div zurückzugeben, verwenden Sie `React.Fragment` oder die Kurzschreibweise `<>...`. Das eignet sich gut für Layout-Komponenten, bei denen ein zusätzliches DOM-Element CSS beeinträchtigen würde.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: Children typisieren

Verwenden Sie in TypeScript `React.ReactNode`, um children zu typisieren – dieser Typ akzeptiert Elemente, Strings, Zahlen, Arrays, null und undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Kurzer Test

Welchen Typ hat props.children, wenn Sie mehrere JSX-Elemente zwischen den Tags einer Komponente übergeben?

Zusammenfassung

props.children enthält beliebiges JSX, das zwischen Tags übergeben wird. Einzelne children sind ein Element, mehrere children sind ein Array. Verwenden Sie bedingte Prüfungen für optionale children und benannte Props für benannte Slots.

Als Nächstes

Nächste Lektion: **React.Children Utilities** – Sie verwenden React.Children.map, count und toArray, um children unabhängig von ihrem Typ oder ihrer Anzahl sicher zu bearbeiten.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen von props.children“ kostenlos?

Ja — der vollständige Text von „Grundlagen von props.children“ 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 „Grundlagen von props.children“?

Übergeben Sie JSX als Children, rendern Sie einzelne oder mehrere Children und steuern Sie deren bedingte Darstellung. 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 „Grundlagen von props.children“?

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

Grundlagen von props.children
React.Children-Hilfsfunktionen
Benannte Slots über Objekt-Props
Props mit cloneElement klonen und injizieren

← Zurück zu React Academy