三个点在ReactJS[duplicate]中做什么

Question

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

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

“{...X}”这个代码是什么意思？

Answer 1

这是React中的扩展运算符语法。

从MDN文档：

扩展语法允许表达式在需要多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于析构赋值）的地方展开。

例如如果

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

}

则如果执行

以上将等价于

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

那么从数据解析的key：value对将覆盖propname='xyz'。因此，最后的Person组件调用将如下所示

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

然而当你把它写成

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

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