Qu'est-ce que cela signifie ... reste dans React JSX

Question

En regardant cette Réagissent Routeur Dom v4 exemple https://reacttraining.com/react-router/web/example/auth-workflow je vois que PrivateRoute composant destructures un repos prop comme ceci

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

Je veux être certain qu' { component: Component, ...rest } moyen:

D' props, que le Composant d'accessoires et de tous les autres accessoires donnée à vous, et renommer props de rest de sorte que vous pouvez éviter de nommer des problèmes avec les accessoires passé à l'Itinéraire render fonction

Suis-je le droit?

Answer 1

Désolé, j'ai réalisé ma première réponse (bien que j'espère toujours fournir des informations utiles sur/plus de contexte) ne répond pas à votre question. Permettez-moi d'essayer de nouveau.

Vous demandez:

Je veux être certain qu' { component: Component, ...rest } moyen:

D' props, obtenir l' Component prop et puis tous les autres props compte tenu de vous, et renommer props de rest de sorte que vous pouvez éviter de nommer des problèmes avec la props passé à l'Itinéraire render fonction

Vous êtes interprétation n'est pas tout à fait correct. Basé sur vos pensées, bien, on dirait que vous vous êtes au moins conscient du fait que ce qui se passe ici à une sorte d' objet de déstructuration (voir la deuxième réponse et les commentaires pour plus de précisions).

Pour donner une explication précise, nous allons décomposer l' { component: Component, ...rest } expression dans deux opérations distinctes:

1. Opération 1: Trouver l' component propriété définie sur props (Note: en minuscules ccomposant) et l'attribuer à un nouvel emplacement dans l'état que nous appelons Component (Remarque: le capital Ccomposant).
2. Opération 2: Ensuite, prendre tout en restant propriétés définies sur l' props objet et les rassembler à l'intérieur d'un argument appelé' rest.

Le point important est que vous n'êtes PAS renommer props de rest. (Et il n'a à voir avec le fait de "ne pas nommer les problèmes avec l' props passé à l'Itinéraire render de la fonction".)

rest === props;
// => false

Votre simplement en tirant sur le reste (c'est pourquoi l'argument est nommé que) les propriétés définies sur votre props objet dans un nouvel argument appelés rest.

---

Exemple D'Utilisation

Voici un exemple. Imaginons que nous avons un objet myObj définie comme suit:

const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

Pour cet exemple, il peut être utile de penser d' props comme ayant la même structure (c'est à dire, les propriétés et les valeurs) comme indiqué en myObj. Maintenant, nous allons écrire la suite de cette cession.

const { name: Username, ...rest } = myObj

La déclaration des montants ci-dessus à la fois la déclaration et l'affectation de deux variables (ou, je suppose, des constantes). La déclaration peut être pensé comme:

Prendre de la propriété name défini sur myObj et affecter sa valeur à une nouvelle la variable que nous appelons Username. Ensuite, prendre toutes les autres propriétés ont été défini sur myObj (c'est à dire, age, sex et dob) et les recueillir dans un nouvel objet assigné à la variable que nous nom rest.

La journalisation Username et rest de la console permettrait de le confirmer. Nous avons les éléments suivants:

console.log(Username);
// => John Doe

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

---

Note De Côté

Vous pourriez vous demander:

Pourquoi passer par la peine de le tirer hors de l' componentde la propriété seulement pour le renommer Component avec une lettre majuscule "C"?

Ouais, il semble assez trivial. Et, alors qu'il s'agit d'une norme Réagir la pratique, il y a une raison pour laquelle toutes Facebook de la documentation sur son cadre est écrit en tant que tel. À savoir, profitant des composants personnalisés rendu avec JSX est moins une pratique de soi que c'est une nécessité. Réagir, ou plus correctement, JSX est sensible à la casse. Composants personnalisés inséré sans majuscule de la première lettre ne sont pas rendus à la DOM. C'est juste comment Réagir a défini lui-même pour identifier les composants personnalisés. Ainsi, si l'exemple à ne pas en outre rebaptisé component de la propriété qui a été tiré hors de props de Component, l' <component {...props} /> de l'expression de ne pas s'afficher correctement.

Answer 2

Il vous permet de "propagation" tous vos props en une seule expression concise. Par exemple, supposons l' props reçu par votre PrivateRoute de la composante ressemble

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

Si vous voulais plus part de ces éléments (c'est à dire, thing1 et thing2) à la imbriquée <Component /> balise et vous n'êtes pas familier avec l' objet de la propagation de la syntaxe, vous pouvez écrire:

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

Cependant, l' { ...props } de la syntaxe permet d'éviter un tel niveau de verbosité en vous permettant d' étaler votre props objet de la même manière on peut se propager d'un tableau de valeurs (par exemple, [...vals]). En d'autres termes, le JSX expression ci-dessous et ci-dessus sont exactement équivalents.

<Component { ...props } />