Que font ces trois points de React?

Ce sont des attributs de diffusion JSX :

Attributs étendus

Si vous avez déjà des accessoires comme objet, et que vous souhaitez le transmettre dans JSX, vous pouvez utiliser ... tant qu'opérateur "propagation" pour passer l'objet entiers. 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 construisez des conteneurs génériques. Cependant, ils peuvent également rendre votre code en désordre en facilitant la transmission de nombreux accessoires non pertinents aux composants qui ne s'en préoccupent pas. Nous vous recommandons d'utiliser cette syntaxe avec modération.

Cette documentation mentionnait que, bien qu'il s'agisse (pour l'instant) d'une chose JSX, il y a une proposition d'ajouter Object Rest et Spread Properties à JavaScript. (JavaScript a reposé et s'est répandu pour les tableaux depuis ES2015, mais pas pour les propriétés de l'objet.) À partir d'avril 2017, cette proposition se trouve à l'étape 3, et donc elle n'a pas fait l'objet de la spécification ES2017 à prédire. . Il ne sera pas clair pendant quelques mois quand il avancera assez rapidement pour créer ES2018; On espère ainsi. (Plus sur les étapes ici .) Transpilers l'ont supporté pendant un certain temps (même séparément de JSX).

Note latérale: Bien que la citation JSX ci-dessus parle d'un «opérateur de répartition», ... n'est pas un opérateur et ne peut l'être. Les opérateurs ont une seule valeur de résultat. ... est une syntaxe primaire (un peu comme le () utilisé avec for ne sont pas l'opérateur de regroupement, même s'ils ressemblent à ça).

Comme vous le savez ... s'appellent Spread Attributs que le nom représente, il permet d'élargir l'expression.

 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} /> 

Donc en bref, c'est un raccourci soigné , on peut dire .

Les trois points de JavaScript sont répartis / restants .

Etendue de l'opérateur

La syntaxe de propagation permet d' étendre une expression dans des endroits où plusieurs arguments sont attendus.

 myFunction(...iterableObj); [...iterableObj, 4, 5, 6] [...Array(10)] 

Paramètres de repos

La syntaxe des paramètres restants est utilisée pour les fonctions avec un nombre variable d'arguments.

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

L'opérateur de répartition / repose pour tableaux a été introduit dans ES6. Il existe une proposition d'État 2 pour la propagation d'objets / propriétés de repos.

TypeScript prend également en charge la syntaxe répandue et peut transpiler cela dans les anciennes versions d'ECMAScript avec des problèmes mineurs.

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 

De cette façon, c'est bien si nous disposons de 3 paramètres maximum, mais que faire si nous devons ajouter, par exemple, 110 paramètres. Devons-nous les définir tous et les ajouter un par un? Bien sûr, il existe un moyen plus facile de faire qui s'appelle SPREAD. Au lieu de passer tous les paramètres que vous écrivez:

 function (...numbers){} 

Nous ne savons pas combien de paramètres nous avons, mais nous savons qu'il y a des tas de ceux-là. Basé sur es6, nous pouvons réécrire la fonction ci-dessus comme ci-dessous et utiliser la propagation et la cartographie entre eux pour le rendre aussi simple qu'un gâteau:

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

Pour ceux qui viennent du monde Python, les attributs de diffusion JSX sont équivalents à des listes d'argument de décompactage (l'opérateur Python ** ).

Je sais qu'il s'agit d'une question JSX, mais travailler avec des analogies aide parfois à l'accélérer.

Les trois points (...) sont appelés l'opérateur de propagation, ce qui est conceptuellement similaire à l'opérateur de répartition de réseau ES6, JSX bénéficiant de ces normes compatibles et en développement afin de fournir une syntaxe plus propre dans JSX

La propagation des propriétés dans les initialiseurs d'objets copie les propriétés énumérables d'un objet fourni sur l'objet nouvellement créé.

 let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 } 

Référence:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html

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

Il utilise ... opérateur de tableau et d'objet dans ES6 (l'objet n'est pas entièrement pris en charge), donc, fondamentalement, si vous définissez déjà vos accessoires, vous pouvez le transmettre à votre élément de cette façon.

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

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

De sorte que 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} /> } 

Ce sont les citations de l'équipe React sur l'opérateur spread 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} />; 

Muting Props est mauvais
Si vous ne connaissez pas les propriétés que vous souhaitez définir, vous pourriez être tenté de les ajouter à l'objet ultérieurement:

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

C'est un anti-modèle car cela signifie que nous ne pouvons pas vous aider à vérifier les propTypes appropriés jusqu'à un moment plus tard. Cela signifie que vos erreurs propTypes se retrouvent avec une trace de pile cryptique.

Les accessoires doivent être considérés comme immuables. La mutation de l'objet des accessoires ailleurs pourrait causer des conséquences inattendues, donc, idéalement, ce serait un objet gelé à ce stade.

Attributs étendus
Maintenant, vous pouvez utiliser une nouvelle fonctionnalité des attributs d'extension appelés JSX:

 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 les accessoires du composant.

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

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

Qu'en est-il de la notation étrange …?
L'opérateur … (ou l'opérateur de répartition) est déjà pris en charge pour les tableaux dans ES6. Il existe également une proposition ECMAScript pour Object Rest et Spread Properties. Nous profitons de ces normes compatibles et en développement afin de fournir une syntaxe plus propre dans JSX.

C'est une nouvelle fonctionnalité dans ES6 / Harmony. On l'appelle l'opérateur de propagation. Il vous permet soit de séparer les parties constitutives d'un tableau / objet, soit de prendre plusieurs éléments / paramètres et de les coller ensemble. Voici un exemple:

 let array = [1,2,3] let array2 = [...array] // array2 is now filled with the items from array 

Et avec un objet / clés:

 // lets pass an object as props to a react component let myParameters = {myKey: 5, myOtherKey: 7} let component = <MyComponent {...myParameters}/> // this is equal to <MyComponent myKey=5 myOtherKey=7 /> 

Ce qui est vraiment cool, c'est que vous pouvez l'utiliser pour désigner «le reste des valeurs».

 const myFunc = (value1, value2, ...values) { // Some code } myFunc(1, 2, 3, 4, 5) // when myFunc is called, the rest of the variables are placed into the "values" array 

Ceux-ci s'appellent spreads. Tout comme son nom l'indique. Cela signifie que cela met toute la valeur de ce tableau ou des objets.

Tel que :

 let a = [1, 2, 3]; let b = [...a, 4, 5, 6]; console.log(b); > [1, 2, 3, 4, 5, 6]