ReactJS 中的三个点有什么作用 [英] What does three dots do in ReactJS

问题描述

const peopleList = this.state.people.map( x => {

    return <Person key={x.name} {...x} />
})

What does "{...x} " this code mean?

解决方案

This is a spread operator syntax in react.

From the MDN DOCS:

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

In your case <Person key={x.name} {...x} /> It means that send the entire object or properties contained with x as it looks as props to the Person Component

For example if

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

}

Then if you do <Person key={x.name} {...x} />

The above will be equivalent of

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

The order in which the spread syntax is used along with the props is also significant.

Consider a case where you pass the props to a component like

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

and if you use the spread operator syntax like

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

Then the prop name='xyz' is overwritten by the key:value pair resolved from data. So the final Person component call will look like

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

However when you write it like

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

Then the prop name='abc' that is resolved from data is overwritten by name='xyz' that is passed explicitly to Person. So the final Person Component call will look like

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

这篇关于ReactJS 中的三个点有什么作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！