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

问题描述

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

{...x}"这个代码是什么意思?

解决方案

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

来自 MDN DOCS:

<块引用>

展开语法允许表达式在以下位置展开多个参数(用于函数调用)或多个元素(用于数组文字)或多个变量(用于解构赋值)预计.

在你的情况下 <Person key={x.name} {...x}/> 这意味着发送包含在 x 因为它看起来像是 Person Component

的道具

例如如果

var x = {名称:你好",姓氏:世界"}

那么如果你执行

以上等价于

<块引用>

传播语法与道具一起使用的顺序也很重要.

考虑将 props 传递给像

这样的组件的情况

var 数据 = {名称:'abc',年龄:'25'，大学:'lmit'}

如果你使用像

这样的扩展运算符语法

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

但是当你像这样写

然后从数据解析的道具 name='abc' 被显式传递给 Person 的 name='xyz' 覆盖>.所以最终的 Person 组件调用看起来像

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

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

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

解决方案

This is a spread operator syntax in react.

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.

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 Person Component

For example if

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

}

Then if you do <Person key={x.name} {...x} />

The above will be equivalent of

<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.

Consider a case where you pass the props to a component like

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

and if you use the spread operator syntax like

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

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

However when you write it like

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

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屋！