React Props für Anfänger: Statische Komponenten in Vorlagen umwandeln
Erfahren Sie, wie React-Props Daten von Elternkomponenten an Kinderkomponenten weiterleiten, wie das Props-Objekt funktioniert, welche Werttypen Sie übergeben können und warum ein einrichtungsorientierter Datenfluss hilft.
Quellen: Part 5A — React Props Explained: Pass Data Between Components Like a Pro
Die Aufteilung einer React-Oberfläche in Komponenten ist nur die halbe Miete beim Wiederverwenden von Code. Eine Komponente, die immer denselben Text anzeigt, ist eine Kopier-und-Einfügen-Einheit und kein Baustein. Props sind das Mechanismus, der es einer Komponente ermöglicht, jedes Mal unterschiedlichen Inhalt anzuzeigen, wenn sie verwendet wird. Diese Anleitung erklärt, was Props sind, wie Daten vom Elternteil zum Kind übertragen werden, wie man Props innerhalb einer Komponente abruft und welche Arten von Werten übergeben werden können, damit man fest codierte Komponenten in wiederverwendbare Vorlagen umwandeln kann.
Wenn eine Komponente nur einen Inhalt anzeigen kann
Sobald man weiß, wie man Komponenten erstellt, sieht ein typisches App-Tree ungefähr so aus, wobei die Wurzelkomponente App mehrere Abschnitte anzeigt:
App
│
├── Navbar
├── Hero
├── Features
├── Footer
Stellen Sie sich nun eine Produktkarte für einen Online-Shop vor. Sie zeigt einen Namen, einen Preis, eine Bewertung sowie einen Kauf-Button an:
-------------------------
📱 iPhone 16
₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------
Dann kommt die Anforderung: Zeigen Sie 500 Produkte an. Die derzeitige Struktur kann nur das eine Telefon zu diesem einen Preis anzeigen, wodurch Laptops, Kopfhörer und Uhren jeweils eine nahezu identische Komponente benötigen würden, was den Sinn der Komponenten zunichtemacht. Man muss die Struktur unverändert lassen, während jedes Mal unterschiedliche Daten bereitgestellt werden. Genau dafür dienen Props.
Was sind Props?
„Props“ ist die Abkürzung für Properties. Es handelt sich dabei um Werte, die eine Elternkomponente an eine Kinderkomponente übermittelt, wenn sie diese darstellt. Die Komponente definiert die Struktur und das Styling; die Props liefern die Details, die jede Instanz einzigartig machen.
Eine Küchenanalogie hilft dabei. Eine Pizzeria entwickelt kein neues Rezept für jede Bestellung. Sie hat ein einziges Rezept und erhält pro Bestellung unterschiedliche Anweisungen: extra Käse, Pilze, Oliven, Mais. Das Rezept ist die Komponente und die Beilagen sind die Props.
Anders ausgedrückt dient ein Komponente als Vorlage, und Props füllen die Lücken. Anstatt eine separate Karte zu erstellen, die immer dasselbe anzeigt, wie hier:
Product Card
iPhone
baut man eine generische Produktkarte und gibt ihr an jedem Einsatzort unterschiedliche Daten weiter.
Elternkomponenten, Kinderkomponenten und einseitiger Datenfluss
Props machen nur im Zusammenhang mit der Beziehung zwischen Komponenten Sinn. Jede React-Anwendung ist ein Baum, in dem einige Komponenten andere rendern:
App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer
Hier ist App die Elternkomponente, während Navbar, Hero, ProductCard und Footer ihre Kinderkomponenten sind. Die Elternkomponente entscheidet, welche Kinderkomponenten rendern werden, und kann ihnen außerdem Informationen übermitteln. Diese Informationen sind ihre Props.
React erzwingt einen einsseitigen Datenfluss: Props fließen von der Elternkomponente zur Kinderkomponente nach unten.
App
│
│ title
│ price
│ rating
▼
ProductCard
Das Kind erhält title, price und rating, kann aber keine neuen Werte über seine Props nach oben senden. Aus Sicht des Kindes sind Props außerdem nur für den Lesen bestimmt. Ein Komponente sollte niemals die Props ändern, die sie erhält; falls sich etwas im Laufe der Zeit ändern muss, gehört das zum State, der in der Regel vom Elternteil verwaltet wird. Wenn ein Kind etwas nach oben melden muss, beispielsweise einen Klick, übermittelt der Elternteil eine Funktion als Prop und das Kind ruft diese auf. Da Daten nur in einer Richtung fließen, kann man immer nachverfolgen, woher ein Wert stammt, indem man den Baum nach oben durchläuft – dadurch sind Fehler viel leichter zu finden.
Ihre erste Komponente mit Props
Fangen Sie mit einer Komponente an, die jemanden nach Namen begrüßt. Sie nimmt einen Parameter namens props entgegen und liest innerhalb ihres JSX props.name aus:
function Welcome(props) {
return (
<h1>Hello, {props.name}</h1>
);
}
export default Welcome;
Der Elternteil rendernt es und gibt den Namen als Attribut mit:
import Welcome from "./Welcome";
function App() {
return (
<>
<Welcome name="Ayush" />
</>
);
}
export default App;
Das renderierte Ergebnis ist:
Hello, Ayush
Was jeder Teil der Syntax bewirkt
Das Übergeben einer Prop sieht aus wie das Schreiben eines HTML-Attributs im Tag der Komponente:
<Welcome name="Ayush" />
Es hilft, sich das als Aufruf einer Funktion mit Argumenten vorzustellen. Auf der Empfängerseite ist die Komponente eine Funktion, deren erstes Parameter die Props sind:
function Welcome(props)
React sammelt alle Attribute, die Sie im Tag geschrieben haben, in einem einzigen einfachen Objekt zusammen und gibt dieses als Parameter weiter. Das Lesen eines Wertes erfolgt durch normales Eigenschaftszugriff:
props.name
Weil der Elternteil dieses Attribut übergeben hat:
name="Ayush"
rendernt die Komponente:
Hello, Ayush
Der Name props ist lediglich eine Konvention. Viele Codebasen destrukturieren ihn in der Parameterliste, wie in function Welcome({ name }).
Mehrere Props auf einmal übergeben
Echte Komponenten benötigen in der Regel mehr als einen Wert. Sie können so viele Attribute hinzufügen, wie Sie möchten. Beachten Sie, dass Zeichenketten in Anführungszeichen geschrieben werden können, während Zahlen und andere JavaScript-Werte in geschweiften Klammern stehen. Im folgenden Beispiel fehlt ein Leerzeichen zwischen dem Komponentennamen und dem ersten Attribut; es sollte <Welcome name=... lauten:
<Welcomename="Ayush"
company="OpenAI"
experience={6}
/>
Die Komponente liest jeden Prop nach seinem Namen aus:
function Welcome(props) {
return (
<>
<h2>{props.name}</h2>
<p>{props.company}</p>
<p>{props.experience} Years</p>
</>
);
}
Und rendernt:
Ayush
OpenAI
6 Years
Wenn man die Props ändert, zeigt dieselbe Komponente völlig unterschiedliche Informationen an.
Eine wiederverwendbare Produktkarte
Zurück zum Store. Die Karte liest nun ihren Titel, Preis und Bewertung aus den Props statt sie fest einzubinden:
function ProductCard(props) {
return (
<div>
<h2>{props.title}</h2>
<p>₹ {props.price}</p>
<p>{props.rating}</p>
</div>
);
}
export default ProductCard;
Der Elternteil kann so viele Karten rendern, wie er benötigt, wobei jede eigene Daten hat. Der Preis wird als Zahl in geschweiften Klammern übergeben, während Titel und Bewertung als Zeichenketten vorliegen:
<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>
Ein Komponente, drei verschiedene Produkte – ohne doppelte Markup-Strukturen. Für 500 Produkte würde man auch nicht manuell 500 Tags schreiben: Die Daten stammen aus einem Array, und die Karten werden mit products.map(...) rendernt, wobei die Felder jedes Elements als Props übergeben und jeder Karte eine eindeutige key zugewiesen wird.
Warum Props die Wiederverwendung ermöglichen
Ohne Props benötigt ein Store eine separate Komponente für jedes Produkt:
ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5
Das bedeutet viele Dateien mit nahezu identischem Code, wobei Änderungen am Design überall wiederholt werden müssen. Mit Props verläuft der Prozess so, dass eine Komponente mit unterschiedlichen Daten versorgt wird:
ProductCard
↓
Different Product Data
↓
Multiple Cards
Eine Datei definiert die Karte; die Instanzen unterscheiden sich nur in den Daten. Dies ist das grundlegende Muster hinter großen React-Anwendungen und Design-Systemen.
Stellen Sie sich ein Standard-Anmeldeformular vor: Jeder füllt die gleichen Felder wie Name, Alter und Adresse mit unterschiedlichen Angaben aus. Das leere Formular ist die Komponente; die Eingaben sind die Props.
Welche Arten von Werten Sie übergeben können
Props sind nicht auf Text beschränkt. Jeder JavaScript-Wert kann übergeben werden. Zeichenketten können in Anführungszeichen gesetzt werden:
name="Ayush"
Zahlen werden in geschweifte Klammern gesetzt, sodass React eine echte Zahl erhält und nicht die Zeichenkette „26“:
age={26}
Boolesche Werte verwenden ebenfalls Klammern:
isAdmin={true}
Man kann den Wert einer Variablen übergeben:
name={username}
Oder das Ergebnis einer beliebigen Ausdrucksformel, die vor der Übernahme an das Kind ausgewertet wird:
price={500 + 200}
Arrays, Objekte und Funktionen können auf dieselbe Weise innerhalb von Klammern übergeben werden. Funktionen als Props dienen dazu, dass Kinder Eltern über Ereignisse informieren können, und ein spezieller Prop mit dem Namen children ermöglicht es einem Komponenten, jeglichen Markup-Text zwischen seinen Öffnungs- und Schließungstags zu umschließen.
Hart kodierte Werte versus Props
Vergleichen Sie einen hart kodierten Überschriftstext:
<h2>iPhone 16</h2>
mit einem, der durch einen Prop gesteuert wird:
<h2>{props.title}</h2>
Der erste kann nur ein Produkt anzeigen; der zweite kann beliebig viele anzeigen. Immer wenn Sie feststellen, dass Sie spezifischen Inhalt in eine für Wiederverwendung vorgesehene Komponente eingeben, fragen Sie sich, ob dieser Inhalt stattdessen als Prop verwendet werden sollte. Vermeiden Sie jedoch das gegenteilige Extrem: Jedes kleine Detail in einen Prop umzuwandeln, erschwert die Nutzung der Komponenten – machen Sie daher nur那些, die tatsächlich zwischen den Verwendungen variieren.
Für einen Überblick darüber, wie Komponenten selbst strukturiert sind, sehen Sie React Components 101.
Hauptpunkte
- Props, abgekürzt für Properties, sind Werte, die ein Elternteil an ein Kind überträgt, wenn es dargestellt wird.
- Die Daten fließen in eine Richtung, vom Elternteil zum Kind, und die Kinder behandeln Props als nur zur Lektüre zugänglich.
props-Objekt, das als erstes Argument der Funktion übergeben wird.children-Prop.