Props sind die Eingaben einer React-Komponente. Ein Elternteil übergibt sie als Attribute in JSX, <UserCard name="Ada" online={true} />, und das Kind erhält sie als ein einzelnes Objekt, das du meist direkt in den Parametern der Funktion destrukturierst. Mit Props zeigt eine Komponente bei jeder Verwendung andere Daten.
Derselbe UserCard rendert drei verschiedene Personen. Achte auf die letzte: Ein Attribut ohne Wert, online, bedeutet online={true}. Füge eine vierte Karte mit deinem eigenen Namen und deiner Rolle hinzu.
Props übergeben und lesen
Übergib einen String in Anführungszeichen und jeden anderen Wert in geschweiften Klammern: Zahlen, Booleans, Arrays, Objekte, Funktionen, sogar JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
React sammelt alle Attribute in einem Objekt und übergibt es als erstes Argument der Komponente. Du kannst es als props lesen oder die benötigten Felder direkt in der Parameterliste auspacken:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
Beide Versionen erhalten dasselbe Objekt. Destrukturierung ist der übliche Stil, weil die Signatur der Funktion dann genau auflistet, welche Props die Komponente nutzt.
Standardwerte
Gib einer Prop mit dem Standardwert der JavaScript-Destrukturierung, = value, einen Default. Er greift, wenn das Elternteil die Prop weglässt oder undefined übergibt. Für null, 0, false oder '' greift er nicht, das sind echte Werte.
Die ersten drei Buttons fallen auf ihre Standardwerte zurück, wo eine Prop fehlt oder undefined ist. Der letzte übergibt null, also ist size wirklich null, und die Suche findet kein Padding. Ändere size={null} zu size="small", um es zu beheben.
Älterer Code setzt Standardwerte mit einer statischen Eigenschaft, Button.defaultProps = { size: 'medium' }. React 19 hat defaultProps für Funktionskomponenten entfernt: JSX ignoriert es bei einer Funktion, ohne Warnung. Bei Klassenkomponenten funktioniert es weiterhin. Nutze Standardwerte bei der Destrukturierung.
Funktionen als Props übergeben
Daten fließen nach unten: Ein Elternteil übergibt Props an seine Kinder, nie andersherum. Wenn ein Kind dem Elternteil sagen muss, dass etwas passiert ist, übergibt das Elternteil eine Funktion, und das Kind ruft sie auf. Nach Konvention heißen diese Props onSomething.
Rating speichert nichts. Es zeigt den value, den es erhält, und meldet Klicks über onRate. Der State lebt in App, das ihn wieder nach unten reicht. Übergib direkt onRate={setRating} statt handleRate, und es funktioniert weiterhin: Ein Setter ist auch eine Funktion. State so in ein gemeinsames Elternteil zu verschieben nennt man State nach oben verlagern.
Props spreaden
Wenn du schon ein Objekt hast, dessen Schlüssel zu den Props einer Komponente passen, spreade es mit {...object}, statt jedes Attribut einzeln zu schreiben. Die Rest-Syntax macht in der Parameterliste das Gegenteil: ein paar Props per Namen nehmen, alles andere sammeln und weiterreichen.
Der zweite Avatar spreadet person und setzt dann color: Wenn dieselbe Prop zweimal vorkommt, gewinnt die spätere, also setze Überschreibungen nach den Spread. TextField behält label für sich und reicht type, placeholder und maxLength direkt an das <input> weiter. Nutze Spreading für Wrapper wie diesen; anderswo macht das explizite Auflisten der Props leichter sichtbar, was eine Komponente bekommt.
Props sind schreibgeschützt
Eine Komponente darf ihre eigenen Props niemals ändern. Sie gehören dem Elternteil, und dasselbe Objekt kann geteilt sein. Behandle sie wie Funktionsargumente, die du nicht neu zuweisen darfst:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
Props ändern sich trotzdem mit der Zeit. Wenn das Elternteil mit neuen Werten erneut rendert, erhält das Kind ein neues Props-Objekt und rendert damit:
Temperature ändert celsius nie. Es berechnet daraus bei jedem Render fahrenheit. Zieh den Schieberegler, und der State des Elternteils ändert sich, also bekommt das Kind eine neue Prop. Wenn ein Kind einen Wert braucht, den es selbst ändern kann, ist dieser Wert State, keine Prop.
Props vs. State
Props und State sind beide einfache JavaScript-Werte, die beeinflussen, was eine Komponente rendert, und eine Änderung an einem von beiden rendert die Komponente erneut. Der Unterschied ist, wem der Wert gehört.
| Props | State | |
|---|---|---|
| Kommt von | Dem Elternteil, als JSX-Attribute | Der Komponente selbst, aus useState oder useReducer |
| Kann die Komponente ihn ändern | Nein, schreibgeschützt | Ja, über ihren Setter |
| Typische Verwendung | Eine Komponente konfigurieren: ein Label, eine Größe, die anzuzeigenden Daten | Sich etwas merken, das sich ändert: Text in einem Eingabefeld, ein offenes Menü |
Derselbe Wert ist oft beides. Im Temperaturbeispiel oben ist celsius State in App und eine Prop in Temperature. Der Besitzer hält ihn als State und reicht ihn als Prop nach unten, zusammen mit einer Funktion zum Ändern, wenn ein Kind das braucht.
Eine Prop kann jeden Wert enthalten, auch JSX und Komponenten. Ein Element wie icon={<StarIcon />} zu übergeben lässt ein Elternteil einen Slot in einem Kind füllen, dieselbe Idee wie children, nur mit einem Namen deiner Wahl.
Die Prop children
Was du zwischen das öffnende und das schließende Tag einer Komponente setzt, kommt als Prop namens children an. So baust du Wrapper wie Karten, Panels und Layouts, die ihren Inhalt nicht im Voraus kennen:
Die Seite zu children behandelt mehrere Slots und den sicheren Umgang mit children.
Keys sind keine Props
key sieht aus wie ein Attribut, aber React behält es für sich, um Listeneinträge zwischen Renders zuzuordnen. Die Komponente erhält es nie:
Die Konsole zeigt props.key als undefined und props.id mit dem echten Wert. Wenn ein Kind den Bezeichner braucht, übergib ihn ein zweites Mal unter einem anderen Namen, so wie hier id. Ein Entwicklungs-Build warnt außerdem, wenn du props.key liest; die Vorschau läuft wie ein Produktions-Build, also siehst du nur das undefined.
Häufig gestellte Fragen
Was sind Props in React?
Props (kurz für Properties) sind die Argumente einer Komponente. Ein Elternteil übergibt sie als JSX-Attribute, <Avatar size={48} />, und das Kind erhält sie als ein Objekt, meist destrukturiert: function Avatar({ size }).
Wie setze ich einen Standardwert für eine Prop?
Nutze einen Standardwert bei der Destrukturierung: function Button({ size = 'medium' }). Er greift, wenn die Prop fehlt oder undefined ist. React 19 hat defaultProps für Funktionskomponenten entfernt; Klassenkomponenten unterstützen es weiterhin.
Kann eine Kindkomponente ihre Props ändern?
Nein. Props sind schreibgeschützt. Um zu ändern, was ein Kind zeigt, übergibt das Elternteil neue Props; damit das Kind um eine Änderung bitten kann, übergibt das Elternteil eine Funktion wie onChange, die das Kind aufruft.
Was ist der Unterschied zwischen Props und State?
Props kommen vom Elternteil, und das Kind kann sie nicht ändern. State gehört der Komponente selbst und ändert sich über ihren Setter. Ein Wert ist oft State in einem Elternteil und eine Prop in seinen Kindern.
Warum ist props.key undefined?
key (wie ref in älterem React) wird von React selbst genutzt, um Listeneinträge zu verfolgen, und nicht an die Komponente übergeben. Wenn das Kind den Wert braucht, übergib ihn ein zweites Mal unter einem anderen Namen, zum Beispiel <Row key={id} id={id} />.
