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

然后，道具name='xyz'被密钥：值对从数据中解析。因此，最终Person组件调用看起来像

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

但是当你把它写成

时

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

然后，由name='abc'覆盖从数据中解析出来的道具name='xyz'，并明确传递给Person。因此最终Person组件调用看起来像

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

Answer 2

那是传播运营商。它是在ES2015中引入的。它接受x的所有属性并将它们分配给元素。

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

您可以在这里阅读更多内容：