Was bedeutet das? In React JSX ruhen

Wenn ich mir dieses Beispiel für React Router Dom v4 ansehe, https://reacttraining.com/react-router/web/example/auth-workflow , sehe ich, dass die PrivateRoute- Komponente eine Rest-Requisite wie diese zerstört

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

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

Holen Sie propssich von die Komponenten-Requisite und dann alle anderen Requisiten, die Sie erhalten haben, und benennen Sie sie um props, restdamit Sie Probleme mit der Benennung der an die Routenfunktion übergebenen Requisiten vermeiden renderkönnen

Habe ich recht?

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:

1. 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).
2. 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;
// => false

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);
// => John Doe

console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

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.

Es ermöglicht Ihnen, alle Ihre propsin einem einzigen prägnanten Ausdruck zu "verbreiten" . Nehmen wir zum Beispiel an, dass das propsvon Ihrer PrivateRouteKomponente empfangene Aussehen so aussieht

// `props` Object:
{
  thing1: 'Something',
  thing2: 'Something else'
}

Wenn Sie weiter die Hand von diesem Artikel wollten ( dh , thing1und thing2) an den verschachtelten unten <Component />Tag und Sie waren mit dem nicht vertraut Objekt Verbreitung Syntax, könnten Sie schreiben:

<Component
  thing1={ props.thing1 }
  thing2={ props.thing2 } />

Doch die { ...props }vermeidet Syntax solche Ausführlichkeit , indem Sie verbreiten Ihr propsObjekt in der gleichen Art und Weise könnte man verteilen eine Reihe von Werten ( zB , [...vals]). Mit anderen Worten, der JSX-Ausdruck unten und der oben sind genau gleichwertig.

<Component { ...props } />

Lassen Sie es uns einfach halten: Wenn in JavaScript ein "Schlüssel: Wert" -Paar dasselbe ist, obj={account:account}ist es dasselbe wie obj={account}. Wenn Sie also Requisiten von der übergeordneten zur untergeordneten Komponente übergeben:

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

Sie werden den Rest der Requisiten weitergeben als:

label={label} placeholder={placeholder} type={type}