Props: Daten an eine Komponente übergeben

Lerne, wie du deine Komponenten wiederverwendbar machst, indem du ihnen über Props Daten übergibst.

7 Min. · 3 Fragen

Eine Komponente, die immer dasselbe anzeigt, ist nicht besonders nützlich. Props (kurz für "properties", also Eigenschaften) sind die Daten, die du an eine Komponente übergibst, genau wie die Argumente einer Funktion. Denk an eine Einladungskarte: Die Vorlage ist für alle gleich, nur der Vorname des Gastes ändert sich. Die Komponente ist die Vorlage, das Prop ist der Vorname.

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

In App schreibst du name="Lea" wie ein HTML-Attribut: React sammelt all diese Werte in einem Objekt, das die Komponente unter dem Namen props erhält. Anschließend liest du props.name innerhalb geschweifter Klammern aus. In der Praxis destrukturierst du die Props oft direkt in den Klammern der Funktion: function Greeting({ name }). Noch ein wichtiger Punkt: Text steht zwischen Anführungszeichen, aber alles andere (Zahlen, Booleans, Arrays) steht zwischen geschweiften Klammern.

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

Das ist die ganze Stärke von Props: Ein soziales Netzwerk schreibt nicht eine Komponente pro Beitrag, sondern eine einzige Post-Komponente und übergibt ihr millionenfach unterschiedliche Props. Du schreibst die Vorlage einmal und verwendest sie überall.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Wofür sind Props da?
   • Um Daten von einer übergeordneten Komponente an eine untergeordnete zu übergeben
   • Um Daten zu speichern, die sich mit der Zeit ändern
   • Um CSS-Stile auf eine Komponente anzuwenden
2. Wie übergibst du die Zahl 25 an eine Profile-Komponente?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. Darf eine Komponente die Props verändern, die sie erhält?
   • Ja, solange sie es innerhalb des return macht
   • Ja, aber nur Strings
   • Nein, Props sind schreibgeschützt