Ce qui signifie-t-il ...reste à Réagir JSX

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 demander:

Je veux être certain que { component: Component, ...rest } signifie:

De props, obtenir le Component prop et puis tous les autres props donné à
vous, et renommer props à rest de sorte que vous pouvez éviter de nommer des problèmes avec la
props transmis à la Route 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 de objet déstructuration (voir la deuxième réponse et les commentaires pour plus de précisions).

De donner une explication précise, nous allons briser le { component: Component, ...rest } expression dans deux opérations distinctes:

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

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

rest === props;
//=> false

Votre simplement en tirant hors 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é rest.

---

Exemple D'Utilisation

Voici un exemple. Imaginons que nous avons un objet myObj définis 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 de props comme ayant la même structure (c'est à dire, propriétés et valeurs) comme indiqué dans myObj. Maintenant, nous allons écrire la suite de cette cession.

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

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

Prendre de la propriété name définie 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.

Journalisation Username et rest à 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) }

---

Côté Remarque

Vous demandez peut-être:

Pourquoi passer par la peine de le tirer hors de la component 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 renommé le component de la propriété qui a été tiré hors de props à Component, le <component {...props} /> expression de ne pas s'afficher correctement.

Permet de garder les choses simples. En javaScript, si touche,la valeur des paires de même,
obj={compte:compte} est la même que obj={compte}. Donc, lors du passage d'accessoires de parent à enfant composant:

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;

vous serez en passant reste de accessoires en tant qu'

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