什么是“{… x}”中的三个点的含义？

const peopleList = this.state.people.map( x => { return <Person key={x.name} {...x} /> })

这个代码的意思是“{… x}”是什么意思？

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

从MDN DOCS ：

扩展语法允许在需要多个参数（用于函数调用）或多个元素（用于数组文字）或多个variables（用于解构赋值）的地方扩展expression式。

在你的情况<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'被从数据parsing的key：value对覆盖。所以最终的Person组件调用将如下所示

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

但是，当你写它像

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

然后从数据中parsing出来的prop name='abc'被显式传递给Person name='xyz'覆盖。所以最终的Person组件调用将如下所示

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

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

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