ReactJS中有三个点做什么

Question

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

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

这段代码的"{... x}"是什么意思？

Answer 1

这是一个反应中的扩展运算符语法.

来自MDN DOCS:

扩展语法允许在需要多个参数(用于函数调用)或多个元素(用于数组文字)或多个变量(用于解构赋值)的位置扩展表达式.

在你的情况下<Person key={x.name} {...x} />它意味着发送包含的整个对象或属性,x因为它看起来像道具Person Component

例如,如果

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

}

如果你这样做的话 <Person key={x.name} {...x} />

以上将相当于

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

展开语法与道具一起使用的顺序也很重要.

考虑将道具传递给类似组件的情况

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

如果你使用扩展运算符语法,如

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

然后,prop name='xyz'会被密钥重写:从数据中解析出的值对.所以最后的Person组件调用看起来像

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

但是当你写它时

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

然后,name='abc'由数据解析的prop 将被name='xyz'显式传递给它Person.所以最终的PersonComponent调用看起来像

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

Answer 2

这就是扩展运算符。它是在 ES2015 中引入的。它获取 x 的所有属性并将它们分配给元素。

{...x}表示获取分配给对象 x 的所有属性，然后将它们分配给<Person />

你可以在这里阅读更多：