Theorie

Props (kurz für Eigenschaften) sind eine Möglichkeit, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Sie sind ähnlich wie Funktionsargumente. Props ermöglichen es Ihnen, untergeordnete Komponenten basierend auf den Anforderungen der übergeordneten Komponente anzupassen und zu konfigurieren.

Warum brauchen wir Props?

Props machen Komponenten wiederverwendbar und konfigurierbar. Sie ermöglichen es der übergeordneten Komponente, mit ihren untergeordneten Komponenten zu kommunizieren, indem sie Daten und Funktionalität an sie übergibt.

Arbeiten mit Props

Props übergeben

Wir übergeben Props, indem wir sie als Attribute verwenden, wenn wir eine Komponente nutzen.

In diesem Beispiel übergibt die ParentComponent eine Prop namens message mit dem Wert 'Hello from parent' an ChildComponent.

Empfangen von Props

Im empfangenden Component (in diesem Fall ChildComponent) können wir auf die übergebenen Props als Eigenschaften des props-Objekts zugreifen.

Das ChildComponent erhält die message-Prop und rendert sie innerhalb einer Text-Komponente.

Standard-Props

Wir können Standardwerte für Props definieren, falls sie nicht bereitgestellt werden.

Hier, wenn message nicht als Prop bereitgestellt wird, wird es auf 'Default Message' gesetzt.

Beispiel

Betrachten Sie ein Szenario, in dem wir eine UserProfile-Komponente haben, die Benutzerdaten als Props erhält.

Nun, wenn wir UserProfile in der App-Komponente verwenden, können wir Benutzerdaten als Props übergeben:

In der Praxis