Que font ces trois points dans React?

Que fait le ...code React (en utilisant JSX) et comment s'appelle-t-il?

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

C'est la notation de propagation de propriété . Il a été ajouté dans ES2018 (la diffusion pour les tableaux / itérables était antérieure, ES2015), mais il est pris en charge dans les projets React depuis longtemps via la transpilation (en tant que " attributs de propagation JSX " même si vous pouvez le faire ailleurs, pas seulement les attributs ).

{...this.props} répartit les "propres" propriétés énumérables en propstant que propriétés discrètes sur l' Modalélément que vous créez. Par exemple, s'il est this.propscontenu a: 1et b: 2,

<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 "propres" props sont incluses.

Puisqu'il childrens'agit d'une propriété "propre" props, la diffusion l'inclura. Donc, si le composant où cela apparaît avait des éléments enfants, ils seront transmis à Modal. Mettre des éléments enfants entre la balise d'ouverture et les balises de fermeture n'est que du sucre syntaxique - le bon type - pour mettre une childrenpropriété dans la balise d'ouverture. Exemple:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

La notation étalée est pratique non seulement pour ce cas d'utilisation, mais pour créer un nouvel objet avec la plupart (ou la totalité) des propriétés d'un objet existant - ce qui revient souvent lorsque vous mettez à jour l'état, car vous ne pouvez pas modifier l'état directement:

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

Cela remplace this.state.foopar un nouvel objet avec toutes les mêmes propriétés que foola aproprié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;
}

Comme vous le savez, ...les attributs Spread que le nom représente, permettent à une expression d'être développée.

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 
}

Cette:

<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 raccourci soigné , on peut dire .

Les trois points représentent l' opérateur d'étalement dans ES6. Cela nous permet de faire pas mal de choses en Javascript:

1. Tableaux concaténés

   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. Déstructurer 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. Combiner 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'}

Il existe une autre utilisation des trois points, connue sous le nom de paramètres de repos , qui permet de prendre tous les arguments d'une fonction dans un seul tableau.

4. Arguments de fonction sous forme de tableau

    function fun1(...params) { 
   
    }  

Les trois points en JavaScript sont l' opérateur propagation / repos .

Opérateur de diffusion

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

myFunction(...iterableObj);

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

[...Array(10)]

Paramètres de repos

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

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

L'opérateur propagation / repos pour les tableaux a été introduit dans ES6. Il y a une proposition de State 2 de l' pour les propriétés de répartition / repos des objets.

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

Il s'agit d'une fonctionnalité d'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

Cette méthode est correcte si nous avons un maximum de 3 paramètres. Mais, si nous devons ajouter par exemple 110 paramètres. Faut-il tous les définir et les ajouter un par un?

Bien sûr, il existe un moyen plus simple, appelé SPREAD . Au lieu de passer tous ces paramètres, vous écrivez:

function (...numbers){} 

Nous n'avons aucune idée du nombre de paramètres dont nous disposons, mais nous savons qu'il y en a des tas. Basé sur ES6, nous pouvons réécrire la fonction ci-dessus comme ci-dessous et utiliser la répartition et la cartographie entre elles 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

Il s'agit simplement de définir des accessoires d'une manière différente dans JSX pour vous!

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

Donc, dans votre cas, le code devrait ressembler à ceci:

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

de sorte que les accessoires que vous avez définis sont désormais 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 sur l'opérateur de propagation dans JSX:

Attributs JSX Spread Si vous connaissez à l'avance toutes les propriétés que vous souhaitez placer sur un composant, 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-modèle car cela signifie que nous ne pouvons pas vous aider à vérifier les bons propTypes jusqu'à bien 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 d'accessoires ailleurs pourrait entraîner des conséquences inattendues. Idéalement, ce serait un objet gelé à ce stade.

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

Vous pouvez l'utiliser plusieurs fois ou le combiner avec d'autres attributs. L'ordre de spécification 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'est-ce que la notation bizarre ...?
L'opérateur ... (ou opérateur d'étalement) est déjà pris en charge pour les tableaux dans ES6. Il existe également une proposition ECMAScript pour les propriétés de repos et de propagation d'objet. Nous profitons de ces normes prises en charge et en développement afin de fournir une syntaxe plus propre dans JSX.

Pour ceux qui viennent du monde Python, les attributs JSX Spread sont équivalents à la décompression des listes d'arguments (l' **opérateur Python ).

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

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

fournir une manière ordonnée de passer des accessoires du parent aux composants enfants. par exemple, étant donné ces accessoires dans un composant parent,

this.props = {
  username: "danM",
  email: "[email protected]"
}

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

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

qui est similaire à ceci

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

mais bien plus propre.

Trois points ...représentent les opérateurs d'étalement ou les paramètres de repos ,

Il permet à une expression de tableau ou une chaîne ou tout ce qui peut être itératif d'être développé dans des endroits où zéro ou plusieurs arguments pour les appels de fonction ou éléments pour le tableau sont attendus.

• Fusionner deux tableaux

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

• Tableau de copie:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

Remarque: La syntaxe de propagation va effectivement d'un niveau en profondeur lors de la copie d'un tableau. Par conséquent, il peut ne pas convenir pour copier des tableaux multidimensionnels comme le montre l'exemple suivant (c'est la même chose avec Object.assign () et la syntaxe répartie).

• Ajoutez des valeurs d'un tableau à un autre à un index spécifique, par exemple 3:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

• Lors de l'appel d'un constructeur avec new:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• Répartis dans les littéraux d'objets:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

Notez que la foopropriété de obj1 a été remplacée par la foopropriété obj2

• En tant que syntaxe de paramètre de repos qui nous permet de représenter un nombre indéfini d'arguments sous forme de tableau:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

Remarque: la syntaxe de propagation (autre que dans le cas des propriétés de propagation) ne peut être appliquée qu'aux objets itérables: la suite génère donc une erreur

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Référence1

Référence2

Bravo à Brandon Morelli. Il a expliqué parfaitement ici , mais les liens peuvent mourir, donc je ne fais que coller le contenu ci-dessous:

La syntaxe de propagation est simplement de trois points: ... elle permet à un itérable de se développer aux endroits où 0+ arguments sont attendus. Les définitions sont difficiles sans contexte. Explorons différents cas d'utilisation pour comprendre ce que cela signifie.

Exemple # 1 - Insertion de tableaux Jetez un œil au code ci-dessous. Dans ce code, nous n'utilisons pas la syntaxe étendue:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

Ci-dessus, nous avons créé un tableau nommé mid. Nous créons ensuite un deuxième tableau qui contient notre midtableau. Enfin, nous déconnectons le résultat. Qu'espérez-vous arrimprimer? Cliquez sur exécuter ci-dessus pour voir ce qui se passe. Voici la sortie:

[1, 2, [3, 4], 5, 6]

Est-ce le résultat que vous attendiez? En insérant le midtableau dans le arrtableau, nous nous sommes retrouvés avec un tableau dans un tableau. C'est bien si tel était le but. Mais que faire si vous ne voulez qu'un seul tableau avec les valeurs de 1 à 6? Pour ce faire, nous pouvons utiliser la syntaxe étendue! N'oubliez pas que la syntaxe répartie permet aux éléments de notre tableau de se développer. Regardons le code ci-dessous. Tout est pareil - sauf que nous utilisons maintenant la syntaxe étalée pour insérer le midtableau dans le arrtableau:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

Et lorsque vous appuyez sur le bouton Exécuter, voici le résultat:

[1, 2, 3, 4, 5, 6]

Impressionnant! Vous vous souvenez de la définition de la syntaxe étendue que vous venez de lire ci-dessus? Voici où cela entre en jeu. Comme vous pouvez le voir, lorsque nous créons le arrtableau et utilisons l'opérateur d'étalement sur le midtableau, au lieu d'être simplement inséré, le midtableau se développe. Cette expansion signifie que chaque élément du midtableau est inséré dans le arrtableau. Au lieu de tableaux imbriqués, le résultat est un tableau unique de nombres allant de 1 à 6.

Exemple # 2 - Math JavaScript a un objet mathématique intégré qui nous permet de faire des calculs mathématiques amusants. Dans cet exemple, nous allons regarder Math.max(). Si vous n'êtes pas familier, Math.max()renvoie le plus grand de zéro ou plusieurs nombres. Voici quelques exemples:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Comme vous pouvez le voir, si vous voulez trouver la valeur maximale de plusieurs nombres, Math.max()nécessite plusieurs paramètres. Vous ne pouvez malheureusement pas simplement utiliser un seul tableau en entrée. Avant la syntaxe étendue, la façon la plus simple d'utiliser Math.max()sur un tableau est d'utiliser.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

Cela fonctionne, c'est vraiment très ennuyeux. Maintenant, regardez comment nous faisons exactement la même chose avec la syntaxe étendue:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

Au lieu d'avoir à créer une fonction et à utiliser la méthode apply pour renvoyer le résultat de Math.max(), nous n'avons besoin que de deux lignes de code! La syntaxe étendue étend nos éléments de tableau et saisit chaque élément de notre tableau individuellement dans la Math.max()méthode!

Exemple # 3 - Copier un tableau En JavaScript, vous ne pouvez pas simplement copier un tableau en définissant une nouvelle variable égale au tableau déjà existant. Prenons l'exemple de code suivant:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

Lorsque vous appuyez sur Exécuter, vous obtenez la sortie suivante:

['a', 'b', 'c']

Maintenant, à première vue, il semble que cela ait fonctionné - il semble que nous ayons copié les valeurs de arr dans arr2. Mais ce n'est pas ce qui s'est passé. Vous voyez, lorsque vous travaillez avec des objets en javascript (les tableaux sont un type d'objet), nous attribuons par référence, pas par valeur. Cela signifie que arr2 a été affecté à la même référence que arr. En d'autres termes, tout ce que nous faisons pour arr2 affectera également le tableau arr d'origine (et vice versa). Jetez un œil ci-dessous:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

Ci-dessus, nous avons poussé un nouvel élément d dans arr2. Pourtant, lorsque nous nous déconnectons de la valeur de arr, vous verrez que la valeur d a également été ajoutée à ce tableau:

['a', 'b', 'c', 'd']

Pas besoin de craindre cependant! Nous pouvons utiliser l'opérateur de propagation! Considérez le code ci-dessous. C'est presque la même chose que ci-dessus. Au lieu de cela, nous avons utilisé l'opérateur d'étalement dans une paire de crochets:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

Cliquez sur exécuter, et vous verrez la sortie attendue:

['a', 'b', 'c']

Ci-dessus, les valeurs du tableau dans arr se sont développées pour devenir des éléments individuels qui ont ensuite été affectés à arr2. Nous pouvons maintenant changer le tableau arr2 autant que nous le voudrions sans conséquences sur le tableau arr d'origine:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

Encore une fois, la raison pour laquelle cela fonctionne est que la valeur de arr est développée pour remplir les crochets de notre définition de tableau arr2. Ainsi, nous définissons arr2 pour égaler les valeurs individuelles de arr au lieu de la référence à arr comme nous l'avons fait dans le premier exemple.

Exemple de bonus - String to Array Comme dernier exemple amusant, vous pouvez utiliser la syntaxe de propagation pour convertir une chaîne en tableau. Utilisez simplement la syntaxe étalée entre deux crochets:

var str = "hello";
var chars = [...str];

console.log(chars);

Les trois points (...)sont appelés l'opérateur d'étalement, ce qui est conceptuellement similaire à l'opérateur d'étalement du tableau ES6, JSX tirant parti de ces normes prises en charge et en développement afin de fournir une syntaxe plus propre dans JSX

Les propriétés réparties dans les initialiseurs d'objet copient les propres 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

La signification de ... dépend de l'endroit où vous l'utilisez dans le code,

1. Utilisé pour répartir / copier le tableau / objet - Il permet de copier le tableau / objet et également d'ajouter de nouvelles valeurs de tableau / ajouter de nouvelles propriétés à l'objet, ce qui est facultatif.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. Utilisé pour fusionner les arguments de fonction dans un seul tableau - Vous pouvez ensuite utiliser des fonctions de tableau dessus.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

C'est un opérateur de spread ...

Par exemple, si vous avez un tableau first=[1,2,3,4,5]et un autre second=[6,7,8].

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

La même chose peut également être faite avec les objets json.

En bref, les trois points ...sont un opérateur de spread dans ES6 (ES2015). L'opérateur Spread récupère toutes les données.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

Donnera le résultat [1,2,3,4,5,6]

console.log(c);

Donnera le résultat [7,8,1,2,3,4]

Est généralement appelé opérateur d'étalement, il est utilisé pour s'étendre partout où cela est nécessaire

exemple

const SomeStyle = {
   margin:10,
   background:#somehexa
}

vous pouvez l'utiliser partout où vous en avez besoin plus sur la syntaxe Spread de l' opérateur de propagation .

Répartir les attributs utilisés pour transmettre les multiples propriétés de manière simple

{... this.props} détient la propriété de this.props

Utilisation de l'opérateur de diffusion {...} avec les accessoires ci-dessous

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

Sans {...} propagation

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

Avec {...} Spread

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

Tweet de Dan Abramov sur l'opérateur Spread (Créateur de Redux)

... cette syntaxe fait partie d'ES6 et n'est pas quelque chose que vous ne pouvez utiliser que dans React. Elle peut être utilisée de deux manières différentes; en tant qu'opérateur d'étalement OU en tant que paramètre de repos.Vous pouvez trouver plus d'informations dans cet article: https://www.techiediaries.com/react-spread-operator-props-setstate/

ce que vous avez mentionné dans la question est quelque chose comme ça, supposons comme ça,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

avec l'utilisation de l'opérateur d'étalement, vous pouvez passer des accessoires au composant comme celui-ci.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

Il est courant de passer des accessoires dans une application React. Ce faisant, nous sommes en mesure d'appliquer des changements d'état au composant enfant, qu'il soit pur ou impur (sans état ou avec état). Il y a des moments où la meilleure approche, lors du passage dans les accessoires, est de passer dans des propriétés singulières ou un objet entier de propriétés. Avec la prise en charge des tableaux dans ES6, nous avons reçu la notation "..." et avec cela, nous sommes maintenant capables de passer un objet entier à un enfant.

Le processus typique de transmission d'accessoires à un enfant est noté avec cette syntaxe:

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

C'est très bien à utiliser lorsque le nombre d'accessoires est minime, mais devient ingérable lorsque le nombre d'accessoires devient trop élevé. Un problème avec cette méthode se produit lorsque vous ne connaissez pas les propriétés nécessaires dans un composant enfant et que la méthode JavaScript typique consiste à définir simplement ces propriétés et à les lier à l'objet ultérieurement. Cela provoque des problèmes de vérification de propType et des erreurs de trace de pile cryptique qui ne sont pas utiles et entraînent des retards dans le débogage. Voici un exemple de cette pratique et ce qu'il ne faut pas faire:

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

Ce même résultat peut être atteint mais avec un succès plus approprié en procédant comme suit:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

Mais n'utilise pas JSX spread ou JSX, donc pour boucler cela dans l'équation, nous pouvons maintenant faire quelque chose comme ceci:

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

Les propriétés incluses dans "... accessoires" sont foo: x, bar: y. Cela peut être combiné avec d'autres attributs pour remplacer les propriétés des "... accessoires" en utilisant cette syntaxe:

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

De plus, nous pouvons copier d'autres objets de propriété les uns sur les autres ou les combiner de cette manière:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Ou fusionnez deux objets différents comme celui-ci (ce n'est pas encore disponible dans toutes les versions de react):

var ab = { ...a, ...b }; // merge(a, b)

Selon le site react / docs de Facebook, une autre façon d'expliquer cela est:

Si vous avez déjà des "accessoires" en tant qu'objet et que vous souhaitez le transmettre dans JSX, vous pouvez utiliser "..." en tant qu'opérateur SPREAD pour transmettre l'intégralité de l'objet d'accessoires. Les deux exemples suivants sont équivalents:

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



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

Les attributs d'étalement peuvent être utiles lorsque vous créez des conteneurs génériques. Cependant, ils peuvent également rendre votre code désordonné en facilitant le passage de nombreux accessoires non pertinents aux composants qui ne se soucient pas d'eux. Cette syntaxe doit être utilisée avec parcimonie.

Son opérateur appelé spread. Par exemple, laissez hello = {name: '', msg: ''} let hello1 = {... hello} Les propriétés des objets hello sont désormais copiées dans hello1.

Cela s'appelle la syntaxe des spreads en javascript.

Il utilise pour déstructurer un tableau ou un objet en javascript.

exemple:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Vous pouvez faire le même résultat avec la Object.assign()fonction en javascript.

Référence: Spread syntax

Cela sera compilé en:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

où il donne plus de deux propriétés titleet animationau-delà de l' propsélément hôte.

...est l'opérateur ES6 appelé Spread .

Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

opérateur de propagation (opérateur triple) introduit dans le script ecama 6 (ES6) .Le script ecama (ES6) est un wrapper de javascript.

répartir les propriétés énumérables des opérateurs dans les accessoires. this.props = {firstName: 'Dan', lastName: 'Abramov', ville: 'New York', pays: 'USA'}

{... this.props} = {prénom: 'Dan', nom de famille: 'Abramov', ville: 'New York', pays: 'USA'}

Mais l'opérateur principal de répartition des fonctionnalités est utilisé pour un type de référence.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

C'est ce qu'on appelle le type de référence, un objet affecte d'autres objets car ils sont partageables en mémoire. Si vous obtenez de la valeur indépendamment, cela signifie que la mémoire de propagation utilise les deux opérateurs de propagation.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

si vous avez un tableau d'éléments et que vous souhaitez afficher les éléments que vous utilisez simplement ... arrayemaments et il itérera sur tous les éléments

...(trois points en Javascript) s'appelle la Spread Syntax ou Spread Operator. Cela permet à un itérable comme une expression de tableau ou une chaîne d'être développé ou une expression d' objet d'être développé où qu'il soit placé. Ce n'est pas spécifique à React. Il s'agit d'un opérateur Javascript.

Toutes ces réponses ici sont utiles, mais je veux énumérer les cas d'utilisation pratiques les plus utilisés de la syntaxe Spread (Spread Operator).

1. Combiner des tableaux (Concaténer des tableaux)

Il existe différentes manières de combiner des tableaux , mais l'opérateur d'étalement vous permet de le placer à n'importe quel endroit d'un tableau. Si vous souhaitez combiner deux tableaux et placer des éléments à n'importe quel point du tableau, vous pouvez procéder comme suit:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. Copie de tableaux

Lorsque nous voulions une copie d'un tableau, nous avions la méthode Array.prototypr.slice () . Mais, vous pouvez faire de même avec l'opérateur de propagation.

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. Fonctions d'appel sans appliquer

Dans ES5, pour transmettre un tableau de deux nombres à la doStuff()fonction, vous utilisez souvent la méthode Function.prototype.apply () comme suit:

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

Cependant, en utilisant l'opérateur d'étalement, vous pouvez passer un tableau dans la fonction.

doStuff(...args);

4. Tableaux de déstructuration

Vous pouvez utiliser la déstructuration et l'opérateur de repos ensemble pour extraire les informations en variables comme vous le souhaitez:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. Arguments de fonction comme paramètres de repos

ES6 a également les trois points (...) qui est un paramètre de repos qui collecte tous les arguments restants d'une fonction dans un tableau.

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. Utilisation des fonctions mathématiques

N'importe quelle fonction où spread est utilisé comme argument peut être utilisée par des fonctions qui peuvent accepter n'importe quel nombre d'arguments.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. Combiner deux objets

Vous pouvez utiliser l'opérateur d'étalement pour combiner deux objets. C'est une façon simple et plus propre de le faire.

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. Séparez une chaîne en caractères séparés

Vous pouvez utiliser l'opérateur d'étalement pour étaler une chaîne en caractères séparés.

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

Vous pouvez penser à d'autres façons d'utiliser l'opérateur Spread. Ce que j'ai énuméré ici, ce sont les cas d'utilisation les plus courants.

Il s'agit d'une nouvelle fonctionnalité d'ES6 / Harmony. Il s'agit de l'opérateur de diffusion. 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 signifier "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

C'est ce qu'on appelle les spreads. Tout comme son nom l'indique. Cela signifie qu'il met quelle que soit sa valeur dans ces tableaux ou objets.

Tel que :

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