Was bedeutet es ... Ruhe in React JSX

Tut mir leid, ich habe festgestellt, dass meine erste Antwort (obwohl sie hoffentlich immernoch einen nützlichen / zusätzlichen Kontext liefert) Ihre Frage nicht beantwortet. Lass es mich nochmal versuchen.

Sie fragen:

  

Ich möchte sicher sein, dass { component: Component, ...rest } bedeutet:

     

Von props , hole die Component prop und dann alle anderen props an   du und benenne props in rest um, damit du Probleme mit der Benennung vermeiden kannst    props an die Funktion Route render

übergeben

Deine Interpretation ist nicht ganz korrekt. Auf der Grundlage Ihrer Gedanken klingt es jedoch so, als ob Sie zumindest der Tatsache bewusst sind, dass das, was hier passiert, eine Art von Objektdestrukturierung (siehe zweite Antwort und Kommentare für mehr Klärung).

Um eine genaue Erklärung zu geben, teilen wir den Ausdruck { component: Component, ...rest } in zwei separate Operationen auf:

1. Vorgang 1: Suchen Sie die für component ( Anmerkung : kleingeschriebene c omponent) definierte props -Eigenschaft, und weisen Sie sie einer neuen Position in an Wir nennen Component ( Anmerkung : capital c omponent).
2. Vorgang 2: Nehmen Sie dann alle verbleibenden Eigenschaften, die für das Objekt props definiert wurden, und sammeln Sie sie in einem Argument namens rest .

Wichtig ist, dass Sie props nicht in rest umbenennen. (Und das hat auch nichts damit zu tun, "Probleme mit der Benennung von props , die an die Funktion Route render übergeben wurden" zu vermeiden.)

Sie ziehen einfach den Rest (daher der Grund dafür, dass das Argument so heißt) der für Ihr props -Objekt definierten Eigenschaften in ein neues Argument namens rest .

Beispiel Verwendung

Hier ist ein Beispiel. Nehmen wir an, wir haben ein Objekt myObj wie folgt definiert:

In diesem Beispiel könnte es hilfreich sein, wenn Sie an props denken, die dieselbe Struktur ( d. h. , Eigenschaften und Werte) haben wie in myObj . Lassen Sie uns nun die folgende Aufgabe schreiben.

Die obige Aussage betrifft sowohl die Deklaration als auch Zuweisung von zwei Variablen (oder, ich nehme an, Konstanten). Die Aussage kann folgendermaßen aussehen:

  

Nehmen Sie die Eigenschaft name definiert für myObj und weisen Sie ihr einen neuen Wert zu   Variable nennen wir Username . Dann nimm alle anderen Eigenschaften   Definiert auf myObj ( d. h. , age , sex und dob ) und sammelt sie   in ein neues Objekt, das der Variablen namens rest zugeordnet ist.

Die Protokollierung von Username und rest an console würde dies bestätigen. Wir haben folgendes:

Seite Hinweis

Sie fragen sich vielleicht:

  

Warum sollten Sie die Eigenschaft component abziehen?   Um es nur mit einem Großbuchstaben "C" umzubenennen Component ?

Ja, es scheint ziemlich trivial zu sein. Und obwohl es sich um eine Standard-React-Praxis handelt, gibt es einen Grund dafür, dass alle Facebook-Dokumentationen auf ihrem Framework basieren ist als solches geschrieben. Die Groß- und Kleinschreibung von benutzerdefinierten Komponenten, die mit JSX gerendert werden, ist per se weniger praktisch als notwendig. Reagieren Sie, oder genauer gesagt, JSX unterscheidet zwischen Groß- und Kleinschreibung . Benutzerdefinierte Komponenten, die ohne Großbuchstaben eingefügt wurden, werden nicht für das DOM gerendert. So hat sich React definiert, um benutzerdefinierte Komponenten zu identifizieren. Hätte das Beispiel die Eigenschaft component , die von props nach Component gezogen wurde, nicht zusätzlich umbenannt, würde der <component {...props} /> -Ausdruck nicht richtig dargestellt.

Erlaubt es Ihnen, all Ihre props in einem einzigen prägnanten Ausdruck zu "verteilen". Angenommen,% ce_de%, das von Ihrer props -Komponente empfangen wird, sieht wie

Wenn Sie diese Elemente ( ie , PrivateRoute und thing1 ) weiter unten an das verschachtelte thing2 -Tag übergeben wollten, waren Sie mit Objekt-Verbreitung Syntax, könnten Sie schreibe:

Die <Component /> -Syntax vermeidet jedoch eine solche Ausführlichkeit, da Sie Ihr { ...props } -Objekt auf die gleiche Weise streuen können, wie Sie ein Array von Werten (< em> zB , props ). Mit anderen Worten, der JSX-Ausdruck unten und oben ist genau gleich.