javascript - son - los puntos suspensivos

¿Qué hacen tres puntos en ReactJS

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Qué hacen estos tres puntos en React? 19 respuestas

const peopleList = this.state.people.map( x => {
return <Person key={x.name} {...x} />
})

¿Qué significa "{... x}" este código?

Answer 1

Ese es el operador de propagación. Fue introducido en ES2015. Toma todas las propiedades de x y las distribuye al elemento.

{...x} significa tomar todas las propiedades asignadas al objeto x, luego asignarlas a <Person />

Puede leer más aquí:

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

Answer 2

Esta es una sintaxis de operador extendido en react.

De los MDN DOCS :

La sintaxis de propagación permite que una expresión se expanda en lugares donde se esperan múltiples argumentos (para llamadas a funciones) o múltiples elementos (para literales de matriz) o múltiples variables (para asignación de desestructuración).

En su caso, <Person key={x.name} {...x} /> Significa que envía todo el objeto o las propiedades contenidas con x como se ve como accesorios al Person Component

Por ejemplo si

var x = {
name: "Hello",
last_name: "World"
}

Entonces, si lo hace <Person key={x.name} {...x} />

Lo anterior será equivalente a

<Person key={x.name} name={x.name} last_name={x.last_name}/>

El orden en el que se usa la sintaxis de propagación junto con los accesorios también es significativo.

Considere un caso en el que pasa los accesorios a un componente como

var data = {
name: ''abc'',
age: ''25'',
college: ''lmit''
}

y si usas la sintaxis del operador de propagación como

 <Person key={x.name} name=''xyz'' {...data} />

Luego, el name=''xyz'' la propiedad name=''xyz'' se sobrescribe con la clave: par de valores resuelto a partir de datos. Entonces la llamada final del componente Person se verá así

 <Person key={x.name} name=''abc'' age= ''25'' college= ''lmit'' />

Sin embargo cuando lo escribes como

 <Person key={x.name} {...data} name=''xyz'' />

Luego, el name=''abc'' del accesorio name=''abc'' que se resuelve a partir de los datos se sobrescribe con el name=''xyz'' que se pasa explícitamente a Person . Entonces la llamada final de Componente de Person se verá así

 <Person key={x.name} name=''xyz'' age= ''25'' college= ''lmit'' />