Was sind Props im Kontext von React?

props (abgeleitet vom englischen Begriff properties) in React ist ein Objekt, das die vom Eltern- zum Kindkomponenten übergebenen Daten enthält. Sie sind innerhalb des Kindkomponenten nur lesbar zugänglich und stellen den Hauptmechanismus für die Weitergabe von Informationen nach unten im Komponentenbaum dar.

Hauptmerkmale von props:

• Datenübertragung: Dienen dazu, Daten, Konfigurationen und Callback-Funktionen vom Eltern- zum Kindkomponenten zu übertragen.
• Unveränderlichkeit: Innerhalb des Kindkomponenten können props nicht verändert werden. Änderungen müssen vom Elternkomponenten ausgehen, der neue props übergibt.
• Objekt: props werden immer als Objekt übergeben. Jede übergebene Eigenschaft wird zu einem Schlüssel in diesem Objekt.
• Zugriff: In funktionalen Komponenten werden props als erstes Argument der Funktion übergeben. In Klassenkomponenten sind sie über this.props zugänglich.

Beispiel für die Übergabe und Verwendung von props:

// Elternkomponente
function ParentComponent() {
  const greeting = "Hallo";
  return <ChildComponent message={greeting} />;
}

// Kindkomponente
function ChildComponent(props) {
  return <p>{props.message}, Welt!</p>;
}