为了账号安全,请及时绑定邮箱和手机立即绑定

ReactJS中有三个点做什么

/ 猿问

ReactJS中有三个点做什么

aluckdog 2019-08-28 15:58:21

ReactJS中有三个点做什么

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

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

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


查看完整描述

2 回答

?
尚方宝剑之说

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

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

然后,name='abc'由数据解析的prop 将被name='xyz'显式传递给它Person。所以最终的PersonComponent调用看起来像

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


查看完整回答
反对 回复 2019-08-28
?
青春有我

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

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

你可以在这里阅读更多:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator


查看完整回答
反对 回复 2019-08-28

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信