react中对象扩展运算符使用问题

看别人代码看到

render() {return <Modal {...this.props}> {this.props.children} </Modal>
}

对其中的{...this.props}产生了疑惑。我们知道在JSX中遇到{}就以js来解析，所以遇到{...this.props}左边的 { 时，开始以js来解析。但我们在这里按照ES7的对象扩展运算符语法，无法解析
成对象，因为需要再多一个{}包住...this.props才行，否则会报错，更别提这里把父组件属性传给子组件使用了，根本就不符合ES7语法，那么是怎么运作的呢。

答案如下，这里不仅仅和ES7有关系还涉及到JSX语法了，

这个是JSX在实现中做的事情，一个传递的shortcut，它能够识别spread syntax到props中去

一个你就把它当作是jsx的语法来使用；一个如果你想知道为什么，读实现去

https://segmentfault.com/q/1010000005028077

转载于:https://www.cnblogs.com/zhansu/p/9016251.html

react中对象扩展运算符使用问题相关推荐

ES6中的扩展运算符
扩展运算符(...)将一个数组转化为参数序列,通常与函数一起使用,show(...['judy','girl']). 数组合并:[...arr1,...arr2,...arr3] 字符串转字符数组:[ ...
es6之三个点（...）扩展运算符数组和对象的使用场景及最常见的用法（霸霸看了都说好）
概念 es6之扩展运算符 (-) 简称三个点数组的扩展运算符应用复制数组扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
es6之扩展运算符...
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, ...
扩展运算符，Object.assign
2019独角兽企业重金招聘Python工程师标准>>> assign或者...扩展符都是浅拷贝对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 ...
JavaScript扩展运算符（...）
对象的扩展运算符扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中. 合并两个 ...
c语言扩展运算符是什么,扩展运算符（spread）是三个点（…)
扩展运算符(spread)是三个点(-),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来一.展开数组 //展开数组 let a = [1, ...
ES9新特性_ES9扩展运算符与rest参数---JavaScript_ECMAScript_ES6-ES11新特性工作笔记053
然后我们再去看看 es9中对,对象扩展运算符的增加. 可以看到说...这个rest参数与spread扩展运算符...,在es6中已经有了,但是es6,这个只是针对于数组的 es9可以针对对象提供了,类 ...
ES6——扩展运算符/三点运算符（...）
扩展运算符(spread)是三个点(...). 数组的扩展运算符对于数组来说,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) ...
【ES6】...扩展运算符
文章目录扩展运算符一.在函数中使用 1.1 传递实参 1.2 接收形参 1.3 new 表达式二.在数组中使用 2.1 合并数组 2.2 拷贝数组三.在对象中使用 3.1 合并对象 3.2 拷 ...

react中对象扩展运算符使用问题

react中对象扩展运算符使用问题相关推荐

最新文章

热门文章