Entschuldigung, ich habe festgestellt, dass meine erste Antwort (obwohl sie hoffentlich immer noch nützlichen / zusätzlichen Kontext bietet) Ihre Frage nicht beantwortet. Lass mich es nochmal versuchen.
Du fragst:
Ich möchte sicher sein, dass das { component: Component, ...rest }bedeutet:
Holen Sie propssich die ComponentRequisite und dann alle anderen props, die Ihnen gegeben wurden, und benennen Sie sie um props, restdamit Sie Namensprobleme mit der propsan die Route übergebenen renderFunktion vermeiden
können
Ihre Interpretation ist nicht ganz richtig. Aufgrund Ihrer Gedanken klingt es jedoch so, als ob Sie sich zumindest der Tatsache bewusst sind, dass das, was hier geschieht, eine Art Objektzerstörung darstellt (siehe zweite Antwort und Kommentare dort für weitere Erläuterungen).
Um eine genaue Erklärung zu geben, teilen wir den { component: Component, ...rest }Ausdruck in zwei separate Operationen auf:
- Betrieb 1: Finden Sie die
componentEigenschaft definiert auf props( Anmerkung : Klein c ls Bestandteil) und weisen Sie an einen neuen Standort im Zustand nennen wir Component( Anmerkung : Kapital C ls Bestandteil).
- Operation 2: Nehmen Sie dann alle verbleibenden Eigenschaften, die für das
propsObjekt definiert sind, und sammeln Sie sie in einem aufgerufenen Argument rest.
Der wichtige Punkt ist , dass Sie die Umbenennung nicht propszu rest. (Und es hat auch nichts mit dem Versuch zu tun, "Namensprobleme mit der propsan die Route übergebenen renderFunktion zu vermeiden ".)
rest === props;
Sie ziehen einfach den Rest (daher wird das Argument so genannt) der für Ihr propsObjekt definierten Eigenschaften in ein neues Argument namens rest.
Beispiel Verwendung
Hier ist ein Beispiel. Nehmen wir an, wir haben ein Objekt myObjwie folgt definiert:
const myObj = {
name: 'John Doe',
age: 35,
sex: 'M',
dob: new Date(1990, 1, 1)
};
In diesem Beispiel kann es hilfreich sein, sich nur propsdie gleiche Struktur ( dh Eigenschaften und Werte) wie in gezeigt vorzustellen myObj. Schreiben wir nun die folgende Aufgabe.
const { name: Username, ...rest } = myObj
Die obige Aussage läuft sowohl auf die Deklaration als auch auf die Zuweisung von zwei Variablen (oder, ich denke, Konstanten) hinaus. Die Aussage kann wie folgt gedacht werden:
Nehmen Sie namedie auf definierte Eigenschaft myObjund weisen Sie ihren Wert einer neuen Variablen zu, die wir aufrufen Username. Nehmen Sie dann alle anderen Eigenschaften, die für myObj( dh ,, und ) definiert wurden age, und sammeln Sie sie in einem neuen Objekt, das der von uns benannten Variablen zugewiesen ist .sexdobrest
Protokollierung Usernameund restzum consolewürde dies bestätigen. Wir haben folgendes:
console.log(Username);
console.log(rest);
Randnotiz
Du fragst dich vielleicht:
Warum sollten Sie sich die Mühe machen, die componentImmobilie abzureißen, um sie Componentmit einem Großbuchstaben "C" umzubenennen ?
Ja, es scheint ziemlich trivial. Und obwohl dies eine Standardpraxis von React ist, gibt es einen Grund, warum die gesamte Dokumentation von Facebook in seinem Framework als solche geschrieben ist. Das Aktivieren von mit JSX gerenderten benutzerdefinierten Komponenten ist an sich weniger eine Praxis als eine Notwendigkeit. Reagieren Sie besser oder besser, JSX unterscheidet zwischen Groß- und Kleinschreibung . Benutzerdefinierte Komponenten, die ohne Großbuchstaben eingefügt werden, werden nicht in das DOM gerendert. Genau so hat sich React definiert, um benutzerdefinierte Komponenten zu identifizieren. So das Beispiel hatte nicht zusätzlich die umbenannte componentEigenschaft , die aus der gezogen wurde , propsum Componentdas <component {...props} />würde Ausdruck machen , nicht richtig.