ReactJS中有三个点做什么 [英] What does three dots do in ReactJS

问题描述

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

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

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

What does "{...x} " this code mean?

推荐答案

这是一个反应中的传播运算符语法。

This is a spread operator syntax in react.

来自 MDN DOCS ：

From the MDN DOCS:

扩展语法允许表达式在以下位置展开
多个参数（用于函数调用）或多个元素（用于
数组文字）或多个变量（用于解构赋值）
是预期的。

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

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

In your case <Person key={x.name} {...x} /> It means that send the entire object or properties contained with x as it looks as props to the the Person Component

例如，如果

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

}

然后如果你执行<人员密钥= {x.name} {... x} />

以上将相当于

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

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

The order in which the spread syntax is used along with the props is also significant.

考虑将道具传递给像

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

如果您使用点差运算符语法，例如

and if you use the spread operator syntax like

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

然后道具 name ='xyz'被数据覆盖的键：值对覆盖。所以最终的 Person 组件调用看起来像

Then the prop name='xyz' is overwritten by the key:value pair resolved from data. So the final Person component call will look like

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

然而当你写它时

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

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

Then the prop name='abc' that is resolved from data is overwritten by name='xyz' that is passed explicitly to Person. So the final Person Component call will look like

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

这篇关于ReactJS中有三个点做什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！