web-dev-qa-db-fra.com

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

En regardant cela React Exemple de routeur Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow Je vois que PrivateRoute composant déstructure un accessoire de repos comme celui-ci

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 que { component: Component, ...rest } veux dire:

À partir de props, récupérez l'accessoire Component, puis tous les autres accessoires, puis renommez props en rest pour éviter les problèmes de nommage avec les accessoires passés à la fonction Route render

Ai-je raison?

reactjsreact-router
46
razor7

Désolé, je me suis rendu compte que ma première réponse (bien que j'espère toujours fournir un contexte utile/supplémentaire) ne répond pas à votre question. Laissez-moi réessayer.

Tu demandes:

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

À partir de props, obtenez le Component prop, puis tous les autres props qui vous sont donnés, et renommez props en rest afin que vous puissiez éviter problèmes de nommage avec le props transmis à la fonction Route render

Votre interprétation n'est pas tout à fait correcte. D'après vos pensées, il semble que vous sachiez au moins que ce qui se passe ici revient à une sorte de déstructuration de l'objet (voir deuxième réponse et commentaires pour plus de précisions).

Pour donner une explication précise, décomposons le { component: Component, ...rest } expression en deux opérations distinctes:

  1. Opération 1: Trouvez la propriété component définie sur props ( remarque: minuscule c omponent) et attribuez-le à un nouvel emplacement dans l'état que nous appelons Component ( Remarque : capital [~ # ~] c [~ # ~] omponent).
  2. Opération 2: Ensuite, prenez toutes les propriétés restantes définies sur l'objet props et récupérez-les à l'intérieur. un argument appelé rest.

Le point important est que vous ne renommez PAS props en rest. (Et cela n’a pas non plus à voir avec le fait d’essayer "d’éviter les problèmes de nommage avec la fonction props transmise à la fonction Route render".)

rest === props;
// => false

Votre simple extraction le reste (d'où le nom de l'argument) des propriétés définies sur votre objet props dans un nouvel argument appelé rest.

Exemple d'utilisation

Voici un exemple. Supposons que nous avons un objet myObj défini 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 que props possède la même structure ( c'est-à-dire, propriétés et valeurs) que celui indiqué dans myObj. Maintenant, écrivons le devoir suivant.

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

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

Prenez la propriété name définie sur myObj et assignez sa valeur à une nouvelle variable que nous appelons Username. Ensuite, prenez toutes les autres propriétés définies sur myObj ( c'est-à-dire, age, sex et dob) et collectez les dans un nouvel objet assigné à la variable nommée rest.

La connexion de Username et rest au console le confirmerait. 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 latérale

Vous pouvez vous demander:

Pourquoi passer par la peine de retirer la propriété component seulement pour la renommer Component avec une lettre majuscule "C"?

Oui, cela semble assez trivial. Et, bien qu’il s’agisse d’une pratique standard React, il existe une raison particulière pour que la documentation de Facebook sur son cadre est écrit en tant que tel. Réagissez, ou plus exactement, JSX respecte la casse . Les composants personnalisés insérés sans première lettre majuscule ne sont pas restitués au DOM. React s'est défini pour identifier des composants personnalisés. Ainsi, l'exemple n'a pas été renommé en outre la propriété component qui a été extraite de props en Component, le <component {...props} /> expression ne parviendrait pas à rendre correctement.

76
IsenrichO

Il vous permet de "répandre" tous vos props dans une seule expression concise. Par exemple, supposons que le props reçu par votre composant PrivateRoute ressemble à

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

Si vous souhaitez transférer davantage ces éléments ( c.-à-d., thing1 Et thing2), Utilisez la balise imbriquée <Component /> Et vous êtes ' t familier avec la syntaxe de objet , vous pourriez écrire:

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

Cependant, la syntaxe { ...props } Élimine cette verbosité en vous permettant de répandre votre props objet de la même manière que vous pourriez répandre = un tableau de valeurs ( par exemple, [...vals]). En d'autres termes, les expressions JSX ci-dessous et ci-dessus sont exactement équivalentes.

<Component { ...props } />
7
IsenrichO

Permet de garder les choses simples. En javaScript, si les paires clé/valeur sont identiques, obj = {compte: compte} est identique à obj = {compte}. Donc, lors du passage d'accessoires d'un composant parent à enfant:

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 passerez le reste des accessoires comme

label={label} placeholder={placeholder} type={type}
0
Yilmaz