ReactJS中的三个点有什么作用[重复]答案

【问题标题】：What does three dots do in ReactJS [duplicate]ReactJS中的三个点有什么作用[重复]
【发布时间】：2017-08-06 07:36:46
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

来自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' />

然后，从数据中解析出来的 prop name='abc' 被显式传递给 Person 的 name='xyz' 覆盖。所以最终的Person 组件调用看起来像

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

【讨论】：

【解决方案2】：

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

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

【讨论】：