¿Qué hacen estos tres puntos en React?

1197

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

<Modal {...this.props} title='Modal heading' animation={false}>
3
  • 12
    NOTA: el ...operador se comporta de manera diferente en diferentes contextos. En este contexto, es el operador de "propagación" descrito a continuación por @TJ Crowder. En un contexto diferente, este también podría ser el operador "resto" descrito a continuación por @Tomas Nikodym. 8 dic 2018 a las 16:02
  • ... está desestructurando la matriz this.props en sus valores individuales
    S.Alvi
    3 de marzo a las 10:50
  • 1
    Pregunta de hermanos: Sintaxis de propagación frente a parámetro de descanso en ES2015 / ES6 .
    Henke
    17 de marzo a las 6:40
1369
+50

Esa es la notación de extensión de propiedad . Se agregó en ES2018 (la propagación para matrices / iterables fue anterior, ES2015), pero ha sido compatible con los proyectos de React durante mucho tiempo a través de la transpilación (como " atributos de propagación JSX ", aunque también podría hacerlo en otros lugares, no solo atributos ).

{...this.props} distribuye 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" en props, spread la incluirá. Entonces, si el componente donde aparece tiene elementos secundarios, se pasarán a Modal. Poner elementos secundarios entre la etiqueta de apertura y las etiquetas de cierre es simplemente azúcar sintáctico, del 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 de extensión es útil no solo para ese caso de uso, sino para crear un nuevo objeto con la mayoría (o todas) de las propiedades de un objeto existente, lo que aparece mucho cuando se actualiza el estado, ya que no se puede modificar el estado. directamente:

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

Eso se reemplaza this.state.foocon un nuevo objeto con todas las mismas propiedades que fooexcepto la 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;
}
2
  • 1
    ¿Poner un elemento secundario entre las etiquetas de apertura y cierre anula la childrenpropiedad o se combinan? 6 feb 2019 a las 12:01
  • 4
    @anddero - Esa es una pregunta muy interesante. Por lo que puedo ver, no está cubierto por [la documentación de children. La experimentación me dice que los niños que proporciona a través de un atributo llamado childrenson reemplazados por los que especifica entre las etiquetas de inicio y final, pero si es un comportamiento indefinido, me aseguraré de no confiar en él. 6 feb 2019 a las 15:47
437

...se denominan atributos de propagación que, como su nombre lo representa, permite 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 buen atajo .

5
  • var person = {nombre: 'Alex', edad: 35} es json, notación de objeto javascript. ... la persona se evalúa como name = 'Alex', age = 35 y su propósito es decir que tiene 1,000,000 de estos pares de valores clave en una estructura json y desea pasarlos todos al componente, todo lo que tiene que hacer es hacer la ... notación y todos se pasan. No es necesario enumerarlos uno por uno. 30/06/20 a las 20:17
  • Esta no es documentación ECMA, ¡no se lo tome demasiado en serio! Primero respondí esta pregunta de esta manera, y después de un tiempo otras personas cambiaron su respuesta para que se pareciera a la mía, solo logrando algunos votos a favor. 07/07/20 a las 9:47
  • ayudaría a agregar un ejemplo de propagación de un objeto en otro objeto, ya que eso es esencialmente lo que hace JSX spread bajo el capó.
    Andy
    9/10/20 a las 2:49
  • 4
    ¡Gran respuesta, muy clara y concisa! 9/12/20 a las 18:53
  • 2
    Sencillo y claro. 24 abr a las 17:40
268

Los tres puntos representan el operador de propagación 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 como una matriz.

  1. Argumentos de función como matriz

      function fun1(...params) {
    
      }
    
7
  • 59
    Esta es una gran respuesta debido a todos los ejemplos claros para cada caso de uso. Gracias por tomarse el tiempo para escribir todo esto. 17/07/18 a las 16:47
  • 2
    Mencione los parámetros de descanso antes del ejemplo para mayor claridad.
    j obe
    28/03/19 a las 11:29
  • 3
    no solo la mejor respuesta, también la más divertida, 'Selana Marie, tu primer enamoramiento: D' 22/02/20 a las 16:51
  • 1
    3.5. Desestructurando un objeto
    Andy
    9/10/20 a las 2:49
  • 2
    Esa es una respuesta increíble, y como desarrollador de Python puedo traducir el operador de propagación al empaquetado / desempaquetado con la notación * o **, básicamente hace lo mismo. 9/12/20 a las 18:57
72

Los tres puntos en JavaScript son el operador de propagación / descanso .

Operador de propagación

La sintaxis de extensión permite expandir una expresión 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 spread / rest para matrices se introdujo en ES6 . Hay una propuesta del Estado 2 para las propiedades de esparcimiento / descanso de objetos.

TypeScript también admite la sintaxis de propagación y puede transferirla a versiones anteriores de ECMAScript con problemas menores .

1
38

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 forma está bien si tenemos un máximo de tres 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 forma más sencilla de hacerlo, que se llama propagación . En lugar de pasar todos esos parámetros, escribe:

function (...numbers){} 

No tenemos idea de cuántos parámetros tenemos, pero sabemos que hay muchos.

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 juego de niños:

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

...(tres puntos en JavaScript) se llama Sintaxis de propagación u Operador de propagación. Esto permite expandir un iterable, como una expresión de matriz o cadena, o expandir 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 de propagación (operador de propagación).

1. Combinar matrices (matrices de concatenación)

Hay una variedad de formas de combinar matrices , pero el operador de extensión le permite colocarlo 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.protypr.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 se usa 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. Desestructuración de matrices

Puede usar la desestructuración y el operador rest 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 función como parámetros de reposo

ES6 también tiene los tres puntos (...), que es un parámetro de descanso 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. Uso de funciones matemáticas

Cualquier función en la que se utilice 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. Combinar dos objetos

Puede utilizar el operador de extensión para combinar dos objetos. Esta es una forma 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. Separe una cadena en caracteres separados

Puede utilizar el operador de extensión para dividir 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 populares.

23

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 de tres puntos: ... permite que un iterable se expanda en lugares donde se esperan más de 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: inserción de matrices

Eche un vistazo al código a continuación. 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, cerramos la sesión del resultado. ¿Qué esperas arrimprimir? Haga clic en ejecutar arriba para ver qué sucede. Aquí está el resultado:

[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. Está bien si ese era el objetivo. Pero, ¿qué pasa si solo desea una única matriz con los valores de 1 a 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 código a continuación. Todo es igual, excepto que ahora estamos usando la sintaxis de extensión para insertar la midmatriz en la arrmatriz:

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

console.log(arr);

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

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

¡Impresionante!

¿Recuerda la definición de sintaxis de propagación que acaba de leer arriba? Aquí es donde entra en juego. Como puede ver, cuando creamos la arrmatriz y usamos el operador de extensió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 única matriz de números que van del 1 al 6.

Ejemplo 2 - Matemáticas

JavaScript tiene un objeto matemático incorporado que nos permite hacer algunos cálculos matemáticos divertidos. En este ejemplo, 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 varios números, se Math.max()requieren varios parámetros. Desafortunadamente, no puede simplemente usar una sola matriz como entrada. Antes de la sintaxis de propagación, 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 de extensión expande nuestros elementos de matriz e ingresa cada elemento de nuestra matriz individualmente en el Math.max()método!

Ejemplo 3: copiar una matriz

En JavaScript, no puede simplemente copiar una matriz estableciendo 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 presiona Ejecutar, obtendrá 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 trabajamos con objetos en JavaScript (las matrices son un tipo de objeto) asignamos por referencia, no por valor. Esto significa que arr2 se ha asignado a la misma referencia que arr. En otras palabras, cualquier cosa que hagamos en arr2 también afectará a la matriz de arr original (y viceversa). Eche 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 necesidad de temer! ¡Podemos usar el operador de propagación! Considere el código a continuación. Es casi lo mismo que el anterior. Sin embargo, en su lugar, hemos utilizado el operador de extensión dentro de un par de corchetes:

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

console.log(arr2);

Pulse 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 queramos 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 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 extensión dentro de un par de corchetes:

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

console.log(chars);
22

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

Está usando un ...operador de matriz y objeto en ES6 (el objeto uno aún no es totalmente compatible), por lo que básicamente si ya define 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} />
}

por lo que los accesorios que definió, ahora 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:

JSX Spread Attributes If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX:

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

Mutating Props is Bad
If you don't know which properties you want to set, you might be tempted to add them onto the object later:

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

This is an anti-pattern because it means that we can't help you check the right propTypes until way later. This means that your propTypes errors end up with a cryptic stack trace.

The props should be considered immutable. Mutating the props object somewhere else could cause unexpected consequences so ideally it would be a frozen object at this point.

Spread Attributes
Now you can use a new feature of JSX called spread attributes:

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

The properties of the object that you pass in are copied onto the component's props.

You can use this multiple times or combine it with other attributes. The specification order is important. Later attributes override previous ones.

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

What's with the weird ... notation?
The ... operator (or spread operator) is already supported for arrays in ES6. There is also an ECMAScript proposal for Object Rest and Spread Properties. We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.

2
  • 2
    has superado la respuesta a su pregunta. 30/06/20 a las 20:27
  • ¿Qué es "utilería"? "Propiedades"? ¿O literal? 15 mar a las 22:03
18

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 estar iterando 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]
  • Copiando matriz:

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

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

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it's the same with Object.assign() and spread syntax).

  • 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 new:

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

console.log(d);
  • Difundir en objetos literales:

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 obj1 ha sido sobrescrita por la foopropiedad obj2 .

  • Como sintaxis de parámetro de descanso 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 (excepto en el caso de las propiedades de propagación) solo se puede aplicar a objetos iterables:

Entonces, lo siguiente arrojará un error:

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

Referencia 1

Referencia 2

1
  • 1
    Su primer ejemplo de fusión de dos matrices con triple punto fue muy útil. Gracias.
    kta
    10 sep.2020 a las 6:04
17

Para aquellos que provienen 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 JSX, pero trabajar con analogías a veces ayuda a hacerlo más rápido.

15

El ...(operador de propagación) se usa en React to:

proporcionan una forma ordenada de pasar los accesorios de los componentes principales a los secundarios. Por ejemplo, dados 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.

3
  • Supongamos que, si queremos pasar solo la propiedad 'username' al componente hijo, ¿podemos usar <ChildComponent {... this.props.username} />? 12/10/20 a las 3:49
  • ¿Por qué me pide que use el operador de propagación antes de esta palabra clave en la etiqueta h1? class Test {obj = {user1: "vijay", edad: 27}; m1 () {<h1 {this.obj.user}> </h1>; }} 12/10/20 a las 8:47
  • // ex-2: para este ejemplo, no arroja un error para usar el operador de propagación cuando uso la etiqueta img. class Test {obj = {user1: "vijay", imageUrl: " picsum.photos/id/1/200/300 "}; m1 () {// <h1 {this.obj.user1}> </h1>; <img src = {this.obj.imageUrl} />; }} 12/10/20 a las 9:07
15

Para alguien que quiera entender esto simple y rápido:

En primer lugar, esta no es una sintaxis solo para React. Esta es la sintaxis de ES6 llamada sintaxis de propagación que itera (fusiona, agrega, etc.) la matriz y el objeto. Lea más sobre esto aquí .

Entonces, para responder a la pregunta:

Imaginemos que tienes esta etiqueta:

<UserTag name="Supun" age="66" gender="male" />

Y haces esto:

const user = {
  "name"=>"Joe",
  "age"=>"50"
  "test"=>"test-val"
};

<UserTag name="Supun" gender="male"  {...user} age="66" />

Entonces la etiqueta será igual a esto:

<UserTag name="Joe" gender="male" test="test-val" age="66" />

Entonces, cuando usó la sintaxis de propagación en una etiqueta de React, tomó el atributo de la etiqueta como atributos de objeto que se fusionan (reemplazan si existe) con el objeto dado user. Además, es posible que haya notado una cosa que solo reemplaza antes del atributo, no después de los atributos. Entonces, en este ejemplo, la edad permanece como está.

2
  • ¿No debería tener 50 años al final? 2 nov.20 a las 20:39
  • 4
    @DonCheadle no, porque agregué {...user}antes de la edad para que la etiqueta de edad no reemplace 4 nov.20 a las 9:30
6

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

Spread properties in object initializers copies own enumerable properties from a provided object onto the newly created object.

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

Referencias:

  1. Propiedades de propagación

  2. JSX en profundidad

4
  • 3
    Esa es una propuesta para el operador de propagación en objetos en ECMAScript. La pregunta era sobre el operador de propagación JSX. No son iguales aunque funcionan de la misma forma.
    ivarni
    24 de septiembre de 2016 a las 13:35
  • 1
    @ivarni Gracias por traerme al contexto, dame un minuto, actualizaré la respuesta según el contexto de la pregunta 24 de septiembre de 2016 a las 13:37
  • @ivarni Actualice la respuesta según el contexto, espero que esto encaje con el contexto 24 de septiembre de 2016 a las 13:46
  • "Los tres puntos (...) se denominan operador de propagación" Solo incorrectamente. :-) Spread y rest no son operadores, y no pueden serlo, porque un operador tiene que producir un valor de resultado único. Spread y rest son sintaxis primaria, no operadores. 28/09/19 a las 17:03
0

Es una práctica común pasar accesorios en una aplicación React. Al hacer esto, podemos aplicar cambios de estado al componente secundario independientemente de si es puro o impuro (sin estado o sin 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} />;

Esto está bien para usar cuando el número de accesorios es mínimo, pero se vuelve inmanejable cuando el número de accesorios aumenta 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 enlazarlas con el objeto más tarde. Esto provoca problemas con la comprobación de propType y errores crípticos de seguimiento de pila que no son útiles y provocan retrasos en la depuración. El siguiente es un ejemplo de esta práctica y lo que no se debe hacer:

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

Este mismo resultado se puede lograr pero con un éxito más apropiado haciendo esto:

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

Pero no usa JSX spread o JSX, por lo que para volver a incluir esto 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 "... props" son foo: x, bar: y. Esto se puede combinar con otros atributos para anular las propiedades de "... props" usando 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 "props" como objeto y desea pasarlo en JSX, puede usar "..." como operador SPREAD para pasar todo el objeto de props. 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 de propagación pueden resultar útiles cuando se crean contenedores genéricos. Sin embargo, también pueden hacer que su código sea complicado al facilitar el paso de muchos accesorios irrelevantes a componentes que no se preocupan por ellos. Esta sintaxis debe usarse con moderación.

1
  • ¿Son "puros" e "impuros" literales? Para enfatizar, tenemos cursiva y negrita en esta plataforma. 15 mar a las 22:24
0

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 hacer el mismo resultado con la Object.assign()función en JavaScript.

Referencia: sintaxis de propagación

0

El operador de propagación (operador triple) introducido en ECMAScript 6 (ES6). ECMAScript (ES6) es un contenedor de JavaScript.

Las propiedades enumerables del operador de propagación en props.

this.props = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'} <Modal {... this.props} title = 'Modal header' animation = {false }>

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

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

Por ejemplo,

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

person1.name = "Raheel";

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

A esto se le llama tipo de referencia. Un objeto afecta a otros objetos, porque se pueden compartir en la memoria. Si está obteniendo un valor de forma independiente, significa difundir la memoria y ambos usan el operador de propagación.

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

person2.name = "Shahzad";

console.log(person.name); // Output: Alex
-3

Esos se llaman spreads. Tal como lo indica el nombre, significa que está poniendo cualquier valor en esa matriz u objetos.

Tal como:

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