Question Que font ces trois points dans React?


Que fait le ... faire dans ce code Réagir (en utilisant JSX) et comment s'appelle-t-il?

<Modal {...this.props} title='Modal heading' animation={false}>

440
2018-06-25 11:21


origine


Réponses:


Réponse mise à jour (avril 2018)

C'est notation de propagation de propriété, ajouté en ES2018 (proposition ici, dans le projet de spécification ici), mais pris en charge depuis longtemps dans les projets React via la transpiration (en tant que "attributs JSX spread", même si vous pouviez le faire ailleurs, pas seulement les attributs).

{...this.props}  se répand les propriétés dans les propriétés en tant que propriétés discrètes (attributs) sur le Modal élément que vous créez. Par exemple, si this.props contenu a: 1 et b: 2, puis

<Modal {...this.props} title='Modal heading' animation={false}>

serait le même que

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Mais c'est dynamique, donc quelles que soient les propriétés props sont inclus.

La notation de propagation est utile non seulement pour ce cas d'utilisation, mais pour créer un nouvel objet avec la plupart (ou toutes) les propriétés d'un objet existant - ce qui revient beaucoup lorsque vous mettez à jour l'état, puisque vous ne pouvez pas modifier l'état directement:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Cela remplace this.state.foo avec un nouvel objet avec toutes les mêmes propriétés que foo sauf le a propriété, qui devient "updated":

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
  max-height: 100% !important;
}

Réponse originale (juillet 2015)

Ce sont Attributs de propagation JSX:

Répartition des attributs

Si vous avez déjà des objets en tant qu'objet, et que vous voulez le passer dans JSX, vous pouvez utiliser ... en tant qu'opérateur "étalé" pour passer l'objet de tous les accessoires. Ces deux composants sont équivalents:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Les attributs de diffusion peuvent être utiles lorsque vous créez des conteneurs génériques. Cependant, ils peuvent aussi rendre votre code désordonné en facilitant le passage de nombreux accessoires non pertinents à des composants qui ne se soucient pas d'eux. Nous vous recommandons d'utiliser cette syntaxe avec parcimonie.

Cette documentation utilisé de mentionner que bien que ce soit (pour le moment) une chose JSX, il y a une proposition à ajouter Propriétés de repos et de propagation d'objets à JavaScript lui-même. (JavaScript a eu du repos et de la propagation pour tableaux depuis ES2015, mais pas pour les propriétés de l'objet.) En novembre 2017, cette proposition est à l'étape 3 depuis un certain temps. Le V8 de Chrome et le SpiderMonkey de Firefox le supportent maintenant, donc probablement si le langage de spécification est élaboré dans le temps, il sera bientôt l'étape 4 et fait partie de la spécification d'instantané ES2018. (En savoir plus sur les étapes ici.) Les transpondeurs l’ont supporté pendant un certain temps (même séparément de JSX).


Note secondaire: Bien que la citation de JSX ci-dessus parle d'un "opérateur de propagation," ... n'est pas un opérateur, et ne peut pas être. Les opérateurs ont une seule valeur de résultat. ... est la syntaxe primaire (un peu comme le () utilisé avec for ne sont pas l'opérateur de groupement, même s'ils en ont l'air.


496
2018-06-25 11:25



comme vous le savez ... sont appelés Répartition des attributs que le nom représente le permet une expression à développer.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

Et dans ce cas (je vais le simplifier).

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

Ce:

<Modal {...person} title='Modal heading' animation={false} />

est égal à

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

Bref, c'est un soignéraccourci, On peut dire.


190
2018-01-13 17:49



Les trois points en JavaScript sont opérateur spread / rest.

Opérateur d'épandage

le syntaxe de propagation permet à une expression d'être développée dans des endroits où plusieurs arguments sont attendus.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Paramètres de repos

le du repos La syntaxe de paramètre est utilisée pour les fonctions avec un nombre variable d'arguments.

function(a, b, ...theArgs) {
  // ...
}

L'opérateur spread / rest pour les tableaux a été introduit en ES6. Il y a un état 2 proposition pour les propriétés de propagation et de repos des objets.

TypeScript prend également en charge la syntaxe de propagation et peut la transposer dans d’anciennes versions d’ECMAScript avec des versions mineures. problèmes.


27
2017-09-09 14:04



C'est une caractéristique de es6 qui est également utilisée dans React. Regardez l'exemple ci-dessous:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

Ce moyen est correct si nous avons un maximum de 3 paramètres mais si nous devons ajouter par exemple 110 paramètres. Devrions-nous les définir tous et les ajouter un par un ?! Bien sûr, il existe un moyen plus facile de faire ce qu'on appelle SPREAD. Au lieu de passer tous ces paramètres, vous écrivez:

function (...numbers){} 

Nous n’avons aucune idée du nombre de paramètres que nous avons, mais nous savons qu’il y en a beaucoup. Basé sur es6, nous pouvons réécrire la fonction ci-dessus comme ci-dessous et utiliser la propagation et la correspondance entre eux pour la rendre aussi simple qu'un morceau de gâteau:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45

20
2018-02-27 12:52



Pour ceux qui viennent du monde Python, les attributs JSX Spread sont équivalents à Déballage des listes d'arguments (le Python **-opérateur).

Je sais que c'est une question JSX, mais travailler avec des analogies aide parfois à l'obtenir plus rapidement.


12
2018-05-15 08:27



C'est juste définir les accessoires d'une manière différente dans JSX pour toi!

Il utilise ... opérateur de tableau et d'objet dans ES6 (objet un pas encore pris en charge), donc si vous définissez déjà vos accessoires, vous pouvez le transmettre à votre élément de cette manière.

Donc, dans votre cas, le code devrait être quelque chose comme ceci:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

donc les accessoires que vous avez définis, maintenant séparés et peuvent être réutilisés si nécessaire.

C'est égal à:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

Voici les citations de l'équipe React à propos de l'opérateur de propagation dans JSX:

Attributs de diffusion JSX   Si vous connaissez toutes les propriétés que vous souhaitez placer sur un composant   à l’avance, il est facile d’utiliser JSX:

var component = <Component foo={x} bar={y} />;

La mutation des accessoires est mauvaise
 Si vous ne savez pas quelles propriétés vous souhaitez définir, vous pourriez être tenté de les ajouter ultérieurement à l'objet:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

Ceci est un anti-pattern car cela signifie que nous ne pouvons pas vous aider à vérifier   les bons proptypes jusqu'à plus tard. Cela signifie que vos propTypes   les erreurs aboutissent à une trace de pile cryptée.

Les accessoires doivent être considérés comme immuables. Mutant l'objet des accessoires   ailleurs pourrait causer des conséquences inattendues si idéalement, il serait   être un objet figé à ce stade.

Répartition des attributs
 Vous pouvez maintenant utiliser une nouvelle fonctionnalité de JSX appelée attributs de propagation:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

Les propriétés de l'objet que vous transmettez sont copiées sur le   les accessoires du composant.

Vous pouvez l'utiliser plusieurs fois ou le combiner avec d'autres attributs.   L'ordre des spécifications est important. Les attributs ultérieurs remplacent   les précédentes.

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Quelle est la notation bizarre?
 L'opérateur ... (ou opérateur de propagation) est déjà pris en charge pour les tableaux dans ES6. Il y a aussi   une proposition ECMAScript pour Object Rest et Spread Properties. Étaient   tirer parti de ces normes soutenues et en développement afin   fournir une syntaxe plus propre dans JSX.


8
2018-05-27 06:06



le ...(opérateur spread) est utilisé pour réagir à:

fournir un moyen judicieux de passer des accessoires de parent à des composants enfants. par exemple, ces accessoires dans un composant parent,

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

ils pourraient être transmis de la manière suivante à l'enfant,

<ChildComponent {...this.props} />

qui est semblable à ceci

<ChildComponent username={this.props.username} email={this.props.email} />

mais bien plus propre.


7
2017-12-22 16:04



Les trois points représentent la Opérateur de propagation en ES6. Cela nous permet de faire pas mal de choses en Javascript:

  1. Copier un tableau 

    var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ];
    var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
    var games = [...shooterGames, ...racingGames];
    
    console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
    
  2. Destructurer un tableau 

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ];
      var [first, ...remaining] = shooterGames;
      console.log(first); //Call of Duty
      console.log(remaining); //['Far Cry', 'Resident Evil']
    
  3. Arguments de fonction en tant que tableau

     function fun1(...params) { 
    
     }  
    

Ce qui précède est appelé paramètres de repos et ne limite pas le nombre de valeurs transmises à une fonction. Cependant, les arguments doivent être du même type.

  1. Peigner deux objets

    var myCrush = {
      firstname: 'Selena',
      middlename: 'Marie'
    };
    
    var lastname = 'my last name';
    
    var myWife = {
      ...myCrush,
      lastname
    }
    
    console.log(myWife); // {firstname: 'Selena',
                         //   middlename: 'Marie',
                         //   lastname: 'my last name'}
    

5
2018-06-06 20:28