Props

Komponenten sind wiederverwendbar, weil sie nicht fest verdrahtet sind — sie können unterschiedliche Daten empfangen. Diese Daten heißen Props (kurz für „Properties”). Props sind der Weg, über den eine Elternkomponente Informationen an eine Kindkomponente weitergibt.

Voraussetzung

Props werden üblicherweise mit Destructuring in der Funktionssignatur entpackt. Falls dir die { }-Syntax bei Funktionsparametern noch nicht vertraut ist, lies zuerst Destructuring.

Props an eine Komponente übergeben

Du übergibst Props, indem du sie wie HTML-Attribute an deine Komponente schreibst:

<StudentCard name="Dan" fach="Informatik" />

Strings stehen in Anführungszeichen. Für alle anderen JavaScript-Werte verwendest du geschweifte Klammern:

<StudentCard name="Dan" semester={3} istAktiv={true} />

Das funktioniert genauso wie bei HTML-Attributen — nur dass du beliebige JavaScript-Werte übergeben kannst: Zahlen, Booleans, Objekte, Arrays und sogar Funktionen.

Props in der Komponente empfangen

React sammelt alle übergebenen Props in einem einzigen Objekt und übergibt es als ersten Parameter an deine Komponente.

Das Props-Objekt

function StudentCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>Fach: {props.fach}</p>
    </div>
  );
}

props ist ein ganz normales JavaScript-Objekt: { name: "Dan", fach: "Informatik" }. Du greifst mit Punktnotation auf die einzelnen Werte zu.

Mit Destructuring

In der Praxis entpackst du die Props direkt in der Funktionssignatur:

function StudentCard({ name, fach }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Fach: {fach}</p>
    </div>
  );
}

Das Ergebnis ist identisch — aber der Code ist kürzer und du siehst auf einen Blick, welche Props die Komponente erwartet.

Warum Destructuring?

Destructuring in der Funktionssignatur ist der Standard in React-Code. Drei Gründe:

1. Kürzerer Code — Kein props. vor jedem Zugriff. Die Absicht ist sofort klar.
2. Editor-Unterstützung — Dein Editor kann Props autocompleten, Typen inferieren und „Alle Verwendungen finden” anbieten.
3. Default-Werte direkt in der Signatur — Du kannst Standardwerte festlegen, ohne extra Logik:

function StudentCard({ name, fach = "Unbekannt" }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Fach: {fach}</p>
    </div>
  );
}

// <StudentCard name="Dan" />
// → fach ist "Unbekannt"

Props dokumentieren mit JSDoc

Wenn du in reinem JavaScript (ohne TypeScript) arbeitest, kannst du Props mit JSDoc dokumentieren. Dein Editor zeigt die Beschreibungen dann als Hover-Tooltips an:

/**
 * Zeigt eine Karte mit Studenten-Informationen.
 *
 * @param {object} props
 * @param {string} props.name - Name des Studenten
 * @param {string} [props.fach="Unbekannt"] - Studienfach (optional)
 * @param {number} [props.semester] - Aktuelles Semester (optional)
 */
function StudentCard({ name, fach = "Unbekannt", semester }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Fach: {fach}</p>
      {semester && <p>Semester: {semester}</p>}
    </div>
  );
}

[props.fach] mit eckigen Klammern markiert den Prop als optional. Das ="Unbekannt" dokumentiert den Default-Wert. So sieht jeder Entwickler sofort, welche Props erwartet werden — ohne den Code lesen zu müssen.

Der Datenfluss: Von oben nach unten

Props fließen immer in eine Richtung: von der Elternkomponente zur Kindkomponente. Das nennt man unidirektionalen Datenfluss.

function App() {
  return (
    <StudentCard name="Dan" fach="Informatik" />
  );
}

function StudentCard({ name, fach }) {
  // name und fach kommen von App — der Elternkomponente
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Fach: {fach}</p>
    </div>
  );
}

Zwei wichtige Regeln:

• Die Elternkomponente entscheidet, welche Daten sie übergibt.
• Props sind read-only — eine Kindkomponente kann ihre Props nicht verändern. Sie empfängt sie, verwendet sie, aber ändert sie nicht.

Denk an Props wie an Funktionsargumente: Du rufst eine Funktion mit bestimmten Werten auf, und die Funktion arbeitet damit — aber sie verändert die übergebenen Werte nicht.

Ausblick

Was, wenn eine Komponente eigene Daten verwalten und verändern muss? Dafür gibt es State — Daten, die eine Komponente selbst kontrolliert. Das lernst du in einem späteren Kapitel.

Props weitergeben (Spread)

Manchmal willst du alle Props eines Objekts an eine Komponente weitergeben. Mit dem Spread-Operator geht das in einer Zeile:

const student = { name: "Dan", fach: "Informatik", semester: 3 };

// Statt einzeln:
<StudentCard name={student.name} fach={student.fach} semester={student.semester} />

// Mit Spread:
<StudentCard {...student} />

Beides ist gleichwertig — der Spread-Operator entpackt alle Eigenschaften des Objekts als einzelne Props.

Sparsam einsetzen

Spread ist praktisch, aber verwende es bewusst. Wenn du {...props} überall weitergibst, wird unklar, welche Props eine Komponente tatsächlich nutzt. In den meisten Fällen ist es lesbarer, Props explizit zu übergeben.

children

Manchmal willst du eine Komponente um Inhalt herumwickeln — wie ein HTML-Element:

<Card>
  <h2>Dan Abramov</h2>
  <p>Fachrichtung: Informatik</p>
</Card>

Der Inhalt zwischen den Tags wird automatisch als spezieller Prop children übergeben:

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

children kann alles sein: Text, JSX-Elemente, andere Komponenten oder eine Kombination. Das macht Komponenten wie Card besonders flexibel — sie definieren das Layout, und der Aufrufer bestimmt den Inhalt.

Alles zusammen

Hier ein vollständiges Beispiel, das alle Konzepte kombiniert: Props übergeben, Destructuring mit Default-Werten, JSDoc, children und den unidirektionalen Datenfluss.

/**
 * Ein Layout-Container für Inhalte.
 *
 * @param {object} props
 * @param {string} [props.variant="default"] - Visueller Stil der Karte
 * @param {React.ReactNode} props.children - Inhalt der Karte
 */
function Card({ variant = "default", children }) {
  return <div className={`card card-${variant}`}>{children}</div>;
}

/**
 * Zeigt Studenten-Informationen in einer Karte.
 *
 * @param {object} props
 * @param {string} props.name - Name des Studenten
 * @param {string} [props.fach="Unbekannt"] - Studienfach
 * @param {number} [props.semester] - Aktuelles Semester
 */
function StudentCard({ name, fach = "Unbekannt", semester }) {
  return (
    <Card variant="highlight">
      <h2>{name}</h2>
      <p>Fach: {fach}</p>
      {semester && <p>Semester: {semester}</p>}
    </Card>
  );
}

function App() {
  return (
    <div>
      <StudentCard name="Dan" fach="Informatik" semester={3} />
      <StudentCard name="Sophie" fach="Mathematik" />
      <StudentCard name="Max" />
    </div>
  );
}

App übergibt Props an StudentCard, StudentCard nutzt Default-Werte und gibt children an Card weiter. Die Daten fließen von oben nach unten — jede Komponente empfängt nur, was sie braucht.

Zusammenfassung

Konzept	Beschreibung
Props übergeben	<Comp name="Dan" alter={25} /> — wie HTML-Attribute, aber mit beliebigen JS-Werten
Props empfangen	function Comp({ name, alter }) — Destructuring in der Signatur
Default-Werte	{ fach = "Unbekannt" } — direkt in der Destructuring-Signatur
Read-only	Props können nicht verändert werden — Daten fließen nur von oben nach unten
Spread	<Comp {...obj} /> — alle Eigenschaften eines Objekts als Props übergeben
children	Inhalt zwischen Tags: <Card>...</Card> → function Card({ children })