Props an eine Komponente übergeben

React-Komponenten kommunizieren überPropsmiteinander. Jede übergeordnete Komponente kann Informationen an ihre untergeordneten Komponenten weitergeben, indem sie ihnen Props übergibt. Props erinnern Sie vielleicht an HTML-Attribute, aber Sie können jeden JavaScript-Wert durch sie übergeben, einschließlich Objekte, Arrays und Funktionen.

Vertraute Props

Props sind die Informationen, die Sie an ein JSX-Tag übergeben. Zum Beispiel sindclassName,src,alt,widthundheighteinige der Props, die Sie an ein<img>übergeben können:

Die Props, die Sie an ein<img>-Tag übergeben können, sind vordefiniert (ReactDOM hält sich anden HTML-Standard). Aber Sie können beliebige Props anIhre eigenenKomponenten übergeben, wie z.B.<Avatar>, um sie anzupassen. So geht's!

Props an eine Komponente übergeben

In diesem Code übergibt dieProfile-Komponente keine Props an ihre untergeordnete Komponente,Avatar:

Sie könnenAvatarin zwei Schritten Props geben.

Schritt 1: Props an die untergeordnete Komponente übergeben

Übergeben Sie zunächst einige Props anAvatar. Lassen Sie uns zum Beispiel zwei Props übergeben:person(ein Objekt) undsize(eine Zahl):

Jetzt können Sie diese Props innerhalb derAvatar-Komponente auslesen.

Schritt 2: Props innerhalb der untergeordneten Komponente auslesen

Sie können diese Props auslesen, indem Sie ihre Namenperson, sizedurch Kommas getrennt innerhalb von({und})direkt nachfunction Avatarauflisten. Dies ermöglicht Ihnen, sie innerhalb desAvatar-Codes zu verwenden, wie Sie es mit einer Variable tun würden.

Fügen Sie etwas Logik zuAvatarhinzu, die dieperson- undsize-Props für das Rendering verwendet, und Sie sind fertig.

Jetzt können SieAvatarso konfigurieren, dass es auf viele verschiedene Arten mit verschiedenen Props gerendert wird. Probieren Sie aus, die Werte anzupassen!

Props ermöglichen es Ihnen, über Eltern- und Kindkomponenten unabhängig voneinander nachzudenken. Sie können beispielsweise die Propspersonodersizeinnerhalb vonProfileändern, ohne darüber nachdenken zu müssen, wieAvatarsie verwendet. Ebenso können Sie ändern, wieAvatardiese Props verwendet, ohne sichProfileanzusehen.

Sie können sich Props wie „Regler“ vorstellen, die Sie einstellen können. Sie erfüllen dieselbe Rolle wie Argumente für Funktionen – tatsächlich sind Propsdaseinzige Argument Ihrer Komponente! React-Komponentenfunktionen akzeptieren ein einzelnes Argument, einprops-Objekt:

Normalerweise benötigen Sie nicht das gesamteprops-Objekt selbst, daher destrukturieren Sie es in einzelne Props.

Angeben eines Standardwerts für eine Prop

Wenn Sie einer Prop einen Standardwert geben möchten, auf den zurückgegriffen wird, wenn kein Wert angegeben ist, können Sie dies bei der Destrukturierung tun, indem Sie=und den Standardwert direkt nach dem Parameter setzen:

Wenn nun<Avatar person={...} />ohne die Propsizegerendert wird, wirdsize auf 100gesetzt.

Der Standardwert wird nur verwendet, wenn die Propsizefehlt oder wenn Siesize={undefined}übergeben. Wenn Sie jedochsize={null}odersize={0}übergeben, wird der Standardwertnichtverwendet.

Weiterleiten von Props mit der JSX-Spread-Syntax

Manchmal wird das Übergeben von Props sehr repetitiv:

An sich ist repetitiver Code nicht falsch – er kann sogar besser lesbar sein. Aber manchmal schätzen Sie vielleicht Kürze. Einige Komponenten leiten alle ihre Props an ihre Kinder weiter, wie es diesesProfile mit Avatartut. Da sie keine ihrer Props direkt verwenden, kann es sinnvoll sein, eine prägnantere „Spread“-Syntax zu verwenden:

Dies leitet alle Props vonProfile an Avatarweiter, ohne jeden einzelnen Namen aufzulisten.

Verwenden Sie die Spread-Syntax mit Zurückhaltung.Wenn Sie sie in jeder zweiten Komponente verwenden, stimmt etwas nicht. Oft deutet dies darauf hin, dass Sie Ihre Komponenten aufteilen und Kinder als JSX übergeben sollten. Mehr dazu im nächsten Abschnitt!

Übergeben von JSX als Kinder

Es ist üblich, eingebaute Browser-Tags zu verschachteln:

Manchmal möchten Sie Ihre eigenen Komponenten auf die gleiche Weise verschachteln:

Wenn Sie Inhalte innerhalb eines JSX-Tags verschachteln, erhält die übergeordnete Komponente diesen Inhalt in einer Prop namenschildren. Zum Beispiel erhält dieCard-Komponente unten einechildren-Prop, die auf<Avatar />gesetzt ist, und rendert sie in einem umschließenden div:

Versuchen Sie, das<Avatar>innerhalb von<Card>durch Text zu ersetzen, um zu sehen, wie dieCard-Komponente beliebigen verschachtelten Inhalt umschließen kann. Sie muss nicht „wissen“, was darin gerendert wird. Dieses flexible Muster werden Sie an vielen Stellen sehen.

Sie können sich eine Komponente mit einerchildren-Prop als ein „Loch“ vorstellen, das von ihren übergeordneten Komponenten mit beliebigem JSX „gefüllt“ werden kann. Sie werden diechildren-Prop häufig für visuelle Wrapper verwenden: Panels, Grids usw.

Illustriert vonRachel Lee Nabors

Wie sich Props im Laufe der Zeit ändern

DieClock-Komponente unten erhält zwei Props von ihrer übergeordneten Komponente:colorundtime. (Der Code der übergeordneten Komponente wird ausgelassen, da erStateverwendet, auf den wir noch nicht eingehen werden.)

Versuchen Sie, die Farbe im folgenden Auswahlfeld zu ändern:

Dieses Beispiel zeigt, dasseine Komponente im Laufe der Zeit unterschiedliche Props erhalten kann.Props sind nicht immer statisch! Hier ändert sich dietime-Prop jede Sekunde, und diecolor-Prop ändert sich, wenn Sie eine andere Farbe auswählen. Props spiegeln die Daten einer Komponente zu einem beliebigen Zeitpunkt wider, nicht nur am Anfang.

Allerdings sind Propsimmutable– ein Begriff aus der Informatik, der „unveränderlich“ bedeutet. Wenn eine Komponente ihre Props ändern muss (z. B. als Reaktion auf eine Benutzerinteraktion oder neue Daten), muss sie ihre übergeordnete Komponente „bitten“, ihrandere Propszu übergeben – ein neues Objekt! Ihre alten Props werden dann verworfen, und schließlich gibt die JavaScript-Engine den von ihnen belegten Speicher frei.

Versuchen Sie nicht, „Props zu ändern“.Wenn Sie auf Benutzereingaben reagieren müssen (wie das Ändern der ausgewählten Farbe), müssen Sie „State setzen“, was Sie inState: Der Speicher einer Komponente lernen können.

Zusammenfassung

• Um Props zu lesen, verwenden Sie die function Avatar({ person, size }) Destrukturierungssyntax.
• Sie können einen Standardwert wie size = 100 angeben, der für fehlende und undefined Props verwendet wird.
• Sie können alle Props mit der <Avatar {...props} /> JSX-Spread-Syntax weiterleiten, aber verwenden Sie sie nicht zu oft!
• Geschachteltes JSX wie <Card><Avatar /></Card> erscheint als Card-Komponenten-children-Prop.
• Props sind schreibgeschützte Momentaufnahmen: Jedes Rendering erhält eine neue Version der Props.
• Sie können Props nicht ändern. Wenn Sie Interaktivität benötigen, müssen Sie State verwenden.