¿Qué hacen estos tres puntos en React?

¿Qué hace el ...código React (usando JSX) y cómo se llama?

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

Esa es la notación de propagación de propiedad . Se agregó en ES2018 (la propagación para matrices / iterables era anterior, ES2015), pero se ha admitido en proyectos React durante mucho tiempo a través de la transpilación (como " atributos de propagación JSX ", aunque también podría hacerlo en otro lugar, no solo atributos )

{...this.props} extiende las propiedades enumerables "propias" propscomo propiedades discretas en el Modalelemento que está creando. Por ejemplo, si está this.propscontenido a: 1y b: 2, entonces

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

sería lo mismo que

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

Pero es dinámico, por lo que propsse incluyen todas las propiedades "propias" .

Dado que childrenes una propiedad "propia" props, la propagación lo incluirá. Entonces, si el componente donde aparece esto tenía elementos secundarios, se los pasará a Modal. Poner elementos secundarios entre la etiqueta de apertura y las etiquetas de cierre es solo azúcar sintáctico, el tipo bueno, para poner una childrenpropiedad en la etiqueta de apertura. Ejemplo:

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 notación extendida es útil no solo para ese caso de uso, sino también para crear un nuevo objeto con la mayoría (o todas) de las propiedades de un objeto existente, que aparece mucho cuando actualiza el estado, ya que no puede modificar el estado directamente:

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

Eso reemplaza this.state.foocon un nuevo objeto con todas las mismas propiedades que foola apropiedad, que se convierte en "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;
}

Como sabe ..., los llamados atributos de propagación que el nombre representa permiten expandir una expresión.

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

Y en este caso (lo voy a simplificar).

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

Esta:

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

es igual a

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

En resumen, podemos decir que es un atajo ordenado .

Los tres puntos representan el operador Spread en ES6. Nos permite hacer bastantes cosas en Javascript:

1. Concatenar matrices

   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. Desestructurando una matriz

     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. Combinando dos objetos

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

Hay otro uso para los tres puntos que se conoce como Parámetros de descanso y hace posible llevar todos los argumentos a una función en una sola matriz.

4. Argumentos de función como matriz

    function fun1(...params) { 
   
    }  
   

Los tres puntos en JavaScript son operador spread / rest .

Operador extendido

La sintaxis de propagación permite que una expresión se expanda en lugares donde se esperan múltiples argumentos.

myFunction(...iterableObj);

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

[...Array(10)]

Parámetros de descanso

La sintaxis del parámetro rest se usa para funciones con un número variable de argumentos.

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

El operador de extensión / descanso para matrices se introdujo en ES6. Hay una propuesta de Estado 2 para propiedades de propagación / descanso de objetos.

TypeScript también admite la sintaxis extendida y puede trasladarla a versiones anteriores de ECMAScript con problemas menores .

Esta es una característica de ES6, que también se usa en React. Mira el siguiente ejemplo:

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

De esta manera está bien si tenemos un máximo de 3 parámetros. Pero, ¿qué pasa si necesitamos agregar, por ejemplo, 110 parámetros? ¿Deberíamos definirlos todos y agregarlos uno por uno?

Por supuesto, hay una manera más fácil de hacer, que se llama SPREAD . En lugar de pasar todos esos parámetros que escribes:

function (...numbers){} 

No tenemos idea de cuántos parámetros tenemos, pero sabemos que hay un montón de esos. Basado en ES6, podemos reescribir la función anterior como se muestra a continuación y usar la distribución y el mapeo entre ellos para que sea tan fácil como un pedazo de pastel:

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

¡Es solo definir accesorios de una manera diferente en JSX para ti!

Está utilizando la ...matriz y el operador de objeto en ES6 (el objeto uno aún no es totalmente compatible), por lo que, básicamente, si ya definió sus accesorios, puede pasarlo a su elemento de esta manera.

Entonces, en su caso, el código debería ser algo como esto:

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

así que los accesorios que definiste, ahora están separados y se pueden reutilizar si es necesario.

Es igual a:

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

Estas son las citas del equipo de React sobre el operador de propagación en JSX:

Atributos de JSX Spread Si conoce todas las propiedades que desea colocar en un componente con anticipación, es fácil usar JSX:

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

Mutar accesorios es malo
Si no sabe qué propiedades desea establecer, puede verse tentado a agregarlos al objeto más tarde:

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

Este es un antipatrón porque significa que no podemos ayudarlo a verificar los tipos de propiedad correctos hasta mucho más tarde. Esto significa que sus errores de propTypes terminan con una traza de pila críptica.

Los accesorios deben considerarse inmutables. La mutación del objeto de utilería en otro lugar podría causar consecuencias inesperadas, por lo que idealmente sería un objeto congelado en este punto.

Atributos de propagación
Ahora puede usar una nueva característica de JSX llamada atributos de propagación:

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

Las propiedades del objeto que pasa se copian en los accesorios del componente.

Puede usar esto varias veces o combinarlo con otros atributos. El orden de las especificaciones es importante. Los atributos posteriores anulan a los anteriores.

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

¿Qué pasa con la extraña ... notación?
El operador ... (u operador de propagación) ya es compatible con matrices en ES6. También hay una propuesta de ECMAScript para el descanso de objetos y las propiedades de propagación. Estamos aprovechando estos estándares compatibles y en desarrollo para proporcionar una sintaxis más limpia en JSX.

Para aquellos que vienen del mundo de Python, los atributos de propagación de JSX son equivalentes a desempaquetar listas de argumentos (el **operador de Python ).

Soy consciente de que esta es una pregunta de JSX, pero trabajar con analogías a veces ayuda a hacerlo más rápido.

El ...(operador de propagación) se utiliza para reaccionar a:

Proporcionan una forma ordenada de pasar accesorios de componentes primarios a secundarios. Por ejemplo, dado estos accesorios en un componente principal,

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

podrían pasarse de la siguiente manera al niño,

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

que es similar a esto

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

Pero mucho más limpio.

Tres puntos ...representan operadores de dispersión o parámetros de descanso ,

Permite que una expresión de matriz o cadena o cualquier cosa que pueda iterarse se expanda en lugares donde se esperan cero o más argumentos para llamadas a funciones o elementos para matriz.

• Fusionar dos matrices

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

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

• Matriz de copia:

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

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

Nota: La sintaxis extendida efectivamente va un nivel más profundo al copiar una matriz. Por lo tanto, puede no ser adecuado para copiar matrices multidimensionales como se muestra en el siguiente ejemplo (es lo mismo con Object.assign () y sintaxis extendida).

• Agregue valores de una matriz a otra en un índice específico, por ejemplo, 3:

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

• Al llamar a un constructor con nuevo:

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

console.log(d);

• Difundir en literales de objeto:

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}

Tenga en cuenta que la foopropiedad de obj1 ha sido sobrescrita por la foopropiedad obj2

• Como una sintaxis de parámetro de reposo que nos permite representar un número indefinido de argumentos como una matriz:

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

Nota: La sintaxis de propagación (que no sea en el caso de las propiedades de propagación) solo se puede aplicar a objetos iterables: por lo tanto, se generará un error

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

Referencia 1

Referencia2

Felicitaciones a Brandon Morelli. Explicó perfectamente aquí , pero los enlaces pueden morir, así que solo estoy pegando el contenido a continuación:

La sintaxis de propagación es simplemente tres puntos: ... permite que un iterable se expanda en lugares donde se esperan 0+ argumentos. Las definiciones son difíciles sin contexto. Exploremos algunos casos de uso diferentes para ayudar a comprender lo que esto significa.

Ejemplo # 1 - Insertar matrices Eche un vistazo al siguiente código. En este código, no usamos la sintaxis de propagación:

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

console.log(arr);

Arriba, hemos creado una matriz llamada mid. Luego creamos una segunda matriz que contiene nuestra midmatriz. Finalmente, desconectamos el resultado. ¿Qué esperas arrimprimir? Haga clic en ejecutar arriba para ver qué sucede. Aquí está la salida:

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

¿Es ese el resultado que esperabas? Al insertar la midmatriz en la arrmatriz, terminamos con una matriz dentro de una matriz. Eso está bien si ese era el objetivo. Pero, ¿qué sucede si solo desea una única matriz con los valores del 1 al 6? Para lograr esto, podemos usar la sintaxis de propagación. Recuerde, la sintaxis de propagación permite que los elementos de nuestra matriz se expandan. Veamos el siguiente código. Todo es igual, excepto que ahora estamos usando la sintaxis de propagación para insertar la midmatriz en la arrmatriz:

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

console.log(arr);

Y cuando presionas el botón Ejecutar, aquí está el resultado:

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

¡Increíble! ¿Recuerdas la definición de sintaxis extendida que acabas de leer? Aquí es donde entra en juego. Como puede ver, cuando creamos la arrmatriz y usamos el operador de propagación en la midmatriz, en lugar de simplemente insertarla, la midmatriz se expande. Esta expansión significa que todos y cada uno de los elementos de la midmatriz se insertan en la arrmatriz. En lugar de matrices anidadas, el resultado es una matriz única de números que van del 1 al 6.

Ejemplo # 2 - Math JavaScript tiene un objeto matemático incorporado que nos permite hacer algunos cálculos matemáticos divertidos. En este ejemplo lo veremos Math.max(). Si no está familiarizado, Math.max()devuelve el mayor de cero o más números. Aquí están algunos ejemplos:

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

Como puede ver, si desea encontrar el valor máximo de múltiples números, Math.max()requiere múltiples parámetros. Desafortunadamente, no puede simplemente usar una sola matriz como entrada. Antes de la sintaxis extendida, la forma más fácil de usar Math.max()en una matriz es usar.apply()

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

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

console.log(max(arr));

Funciona, es realmente molesto. Ahora eche un vistazo a cómo hacemos exactamente lo mismo con la sintaxis de propagación:

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

console.log(max);

En lugar de tener que crear una función y utilizar el método de aplicación para devolver el resultado Math.max(), ¡solo necesitamos dos líneas de código! ¡La sintaxis extendida expande nuestros elementos de matriz e ingresa cada elemento de nuestra matriz individualmente en el Math.max()método!

Ejemplo # 3 - Copie una matriz En JavaScript, no puede simplemente copiar una matriz configurando una nueva variable igual a la matriz ya existente. Considere el siguiente ejemplo de código:

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

console.log(arr2);

Cuando presionas ejecutar, obtendrás el siguiente resultado:

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

Ahora, a primera vista, parece que funcionó, parece que hemos copiado los valores de arr en arr2. Pero eso no es lo que ha sucedido. Verá, cuando trabaje con objetos en javascript (las matrices son un tipo de objeto) asignamos por referencia, no por valor. Esto significa que arr2 ha sido asignado a la misma referencia que arr. En otras palabras, cualquier cosa que hagamos a arr2 también afectará la matriz arr original (y viceversa). Echa un vistazo a continuación:

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

arr2.push('d');

console.log(arr);

Arriba, hemos introducido un nuevo elemento d en arr2. Sin embargo, cuando desconectamos el valor de arr, verá que el valor d también se agregó a esa matriz:

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

¡Sin embargo, no hay que temer! ¡Podemos usar el operador de propagación! Considera el siguiente código. Es casi lo mismo que el anterior. Sin embargo, hemos utilizado el operador de propagación dentro de un par de corchetes:

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

console.log(arr2);

Presione ejecutar y verá el resultado esperado:

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

Arriba, los valores de la matriz en arr se expandieron para convertirse en elementos individuales que luego se asignaron a arr2. Ahora podemos cambiar la matriz arr2 tanto como nos gustaría sin consecuencias en la matriz arr original:

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

arr2.push('d');

console.log(arr);

Nuevamente, la razón por la que esto funciona es porque el valor de arr se expande para llenar los corchetes de nuestra definición de matriz arr2. Por lo tanto, estamos configurando arr2 para que sea igual a los valores individuales de arr en lugar de la referencia a arr como lo hicimos en el primer ejemplo.

Ejemplo de bonificación: cadena a matriz Como ejemplo final divertido, puede usar la sintaxis de propagación para convertir una cadena en una matriz. Simplemente use la sintaxis de propagación dentro de un par de corchetes:

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

console.log(chars);

Los tres puntos (...)se denominan operador de propagación, y esto es conceptualmente similar al operador de distribución de matriz ES6, JSX aprovecha estos estándares compatibles y en desarrollo para proporcionar una sintaxis más limpia en JSX

Las propiedades extendidas en los inicializadores de objetos copian propiedades enumerables propias de un objeto proporcionado en el objeto recién creado.

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

Referencia:

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

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

El significado de ... depende de dónde lo use en el código,

1. Se utiliza para difundir / copiar la matriz / objeto : ayuda a copiar la matriz / objeto y también a agregar nuevos valores de matriz / agregar nuevas propiedades al objeto, lo cual es opcional.

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. Se usa para fusionar los argumentos de la función en una sola matriz : luego puede usar funciones de matriz en ella.

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

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

Este es un operador extendido ...

Por ejemplo, si tiene una matriz first=[1,2,3,4,5]y otra second=[6,7,8].

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

Lo mismo también se puede hacer con objetos json.

En resumen, los tres puntos ...son un operador extendido en ES6 (ES2015). El operador de propagación buscará todos los datos.

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


console.log(b);

Dará el resultado [1,2,3,4,5,6]

console.log(c);

Dará el resultado [7,8,1,2,3,4]

Generalmente se llama operador de propagación, se usa para expandir donde sea necesario

ejemplo

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

puede usar esto siempre que lo necesite más sobre la sintaxis Spread del operador de propagación .

Atributos separados utilizados para pasar las múltiples propiedades de una manera simple

{... this.props} tiene la propiedad de this.props

Uso del {...} Operador de propagación con los siguientes accesorios

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

Sin {...} propagación

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

> 

Con {...} Spread

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

Tweet de Dan Abramov sobre el operador Spread (Creador de Redux)

... esta sintaxis es parte de ES6 y no es algo que pueda usar solo en React. Se puede usar de dos maneras diferentes; como operador de propagación O como parámetro de reposo. Puede encontrar más información en este artículo: https://www.techiediaries.com/react-spread-operator-props-setstate/

lo que has mencionado en la pregunta es algo como esto, supongamos que así

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

Con el uso del operador de propagación puede pasar accesorios al componente de esta manera.

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

Es una práctica común pasar accesorios en una aplicación React. Al hacer esto, podemos aplicar cambios de estado al componente hijo independientemente de si es Puro o Impuro (sin estado o con estado). Hay momentos en que el mejor enfoque, al pasar accesorios, es pasar propiedades singulares o un objeto completo de propiedades. Con el soporte para matrices en ES6 se nos dio la notación "..." y con esto ahora podemos lograr pasar un objeto completo a un niño.

El proceso típico de pasar accesorios a un niño se observa con esta sintaxis:

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

Está bien usarlo cuando el número de accesorios es mínimo, pero se vuelve inmanejable cuando los números de accesorios aumentan demasiado. Un problema con este método ocurre cuando no conoce las propiedades necesarias dentro de un componente secundario y el método típico de JavaScript es establecer esas propiedades y vincularlas al objeto más tarde. Esto causa problemas con la comprobación de propType y los errores de rastreo de la pila críptica que no son útiles y causan demoras en la depuración. El siguiente es un ejemplo de esta práctica, y qué no hacer:

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

Se puede lograr el mismo resultado pero con un éxito más apropiado al hacer esto:

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

Pero no utiliza JSX spread o JSX, así que para volver a incluirlo en la ecuación, ahora podemos hacer algo como esto:

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

Las propiedades incluidas en "... accesorios" son foo: x, bar: y. Esto se puede combinar con otros atributos para anular las propiedades de "... accesorios" utilizando esta sintaxis:

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

Además, podemos copiar otros objetos de propiedad entre sí o combinarlos de esta manera:

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

O combine dos objetos diferentes como este (esto aún no está disponible en todas las versiones de reacción):

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

Otra forma de explicar esto, según el sitio react / docs de Facebook es:

Si ya tiene "accesorios" como objeto y desea pasarlo en JSX, puede usar "..." como operador SPREAD para pasar todo el objeto de accesorios. Los siguientes dos ejemplos son equivalentes:

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



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

Los atributos extendidos pueden ser útiles cuando está creando contenedores genéricos. Sin embargo, también pueden hacer que su código sea desordenado al facilitar el paso de muchos accesorios irrelevantes a componentes que no les importan. Esta sintaxis debe usarse con moderación.

Se llama operador de propagación. Por ejemplo, let hello = {name: '', msg: ''} let hello1 = {... hello} Ahora las propiedades del objeto hello se copian en hello1.

Se llama sintaxis de spreads en javascript.

Se utiliza para desestructurar una matriz u objeto en javascript.

ejemplo:

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)

Puede hacerlo el mismo resultado con la Object.assign()función en javascript.

Referencia: sintaxis extendida

Esto se compilará en:

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

donde da más dos propiedades titley animationmás allá del propselemento host.

...es el operador ES6 llamado Spread .

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

El operador spread (operador triple) introduce en ecama script 6 (ES6) .Ecama script (ES6) es un contenedor de javascript.

Operador de propagación de propiedades enumerables en accesorios. this.props = {firstName: 'Dan', lastName: 'Abramov', ciudad: 'New York', país: 'USA'}

{... this.props} = {firstName: 'Dan', lastName: 'Abramov', ciudad: 'New York', país: 'USA'}

Pero el operador principal de propagación de características se utiliza para un tipo de referencia.

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

person1.name = "Raheel";

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

Esto se llama tipo de referencia, un objeto afecta a otros objetos porque son compartibles en la memoria. Si obtiene valor independientemente de la memoria de dispersión, ambos utilizan el operador de dispersión.

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

person2.name = "Shahzad";

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

si tiene una matriz de elementos y desea mostrar los elementos que acaba de usar ... arrayemaments e iterará sobre todos los elementos

...(tres puntos en Javascript) se llama Spread Sintaxis u Spread Operator. Esto permite expandir una iteración como una expresión de matriz o cadena o una expresión de objeto donde sea que se coloque. Esto no es específico de React. Es un operador de Javascript.

Todas estas respuestas aquí son útiles, pero quiero enumerar los casos de uso prácticos más utilizados de la sintaxis Spread (Spread Operator).

1. Combinar matrices (concatenar matrices)

Hay una variedad de formas de combinar matrices , pero el operador de propagación le permite colocar esto en cualquier lugar de una matriz. Si desea combinar dos matrices y colocar elementos en cualquier punto dentro de la matriz, puede hacer lo siguiente:

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

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

2. Copiar matrices

Cuando queríamos una copia de una matriz, solíamos tener el método Array.prototypr.slice () . Pero, puede hacer lo mismo con el operador de propagación.

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

3. Funciones de llamada sin aplicar

En ES5, para pasar una matriz de dos números a la doStuff()función, a menudo utiliza el método Function.prototype.apply () de la siguiente manera:

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

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

Sin embargo, al usar el operador de propagación, puede pasar una matriz a la función.

doStuff(...args);

4. Matrices de desestructuración

Puede usar la desestructuración y el operador de descanso juntos para extraer la información en variables como desee:

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. Argumentos de funciones como parámetros de descanso

ES6 también tiene los tres puntos (...), que es un parámetro de reposo que recopila todos los argumentos restantes de una función en una matriz.

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

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

6. Usando funciones matemáticas

Cualquier función donde se use spread como argumento puede ser utilizada por funciones que pueden aceptar cualquier número de argumentos.

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

7. Combinando dos objetos

Puede usar el operador de propagación para combinar dos objetos. Esta es una manera fácil y limpia de hacerlo.

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

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

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

8. Separar una cadena en caracteres separados

Puede usar el operador de propagación para extender una cadena en caracteres separados.

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

Puede pensar en más formas de utilizar el Operador de propagación. Lo que he enumerado aquí son los casos de uso más populares.

Esta es una nueva característica en ES6 / Harmony. Se llama el Operador de propagación. Le permite separar las partes constituyentes de una matriz / objeto, o tomar múltiples elementos / parámetros y pegarlos. Aquí hay un ejemplo:

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

Y con un objeto / claves:

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

Lo que es realmente genial es que puedes usarlo para significar "el resto de los valores".

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

Esos se llaman spreads. Justo como su nombre lo indica. Significa que está poniendo cualquier valor en esos arreglos u objetos.

Como :

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