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
react中对象扩展运算符使用问题的更多相关文章
- 对象扩展运算符(…)与rest运算符
对象扩展运算符(…) 当编写一个方法时,我们允许它传入的参数是不确定的.这时候可以使用对象扩展运算符来作参数,看一个简单的列子: function xzdemo(...arg){ console.lo ...
- 关于ES6的对象扩展运算符
对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中 对象扩展运算符: 1. 复制对象 let obj1 = { x: 1, y: 2, z: 3 } let obj ...
- JavaScript:学习笔记(8)——对象扩展运算符
JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...
- JavaScript学习系列4 ----- JavaScript中的扩展运算符 三个点(...)
在JavaScript中, ES6开始有rest参数 和 三个点扩展运算符 (spread运算符) 我们来看看他们各自的用处 1. rest参数 rest参数的形式为 ...变量名 ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- vuex在页面中以对象展开运算符形式引入报错解决
当页面中以mapGetters等对象扩展运算符写的时候,会报错 unexpected token 解决如下: babel还要加插件才能解释这个写法 npm install --save-dev bab ...
- react中创建组件
第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...
- ES6扩展运算符...进行的数组删除
今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了. const ADD_USER = &qu ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- C++ 多线程阻塞 (多线程同步)(MsgWaitForMultipleObjects)(连着消息一起控制,牛)
在主线程定要禁止使用waitforsingleobject(),原因是会阻塞主线程的消息循环,所以必须使用另一种 MsgWaitForMultipleObjects,即可以让消息通过,下面就是一个基于 ...
- Notepad++和MinGW的安装和配置
http://blog.csdn.net/cclovepl/article/details/70568313 http://blog.csdn.net/cclovepl/article/details ...
- 16进制串与ASCII字符串相互转换
提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL .// ...
- 三国武将查询系统 //Java 訪问 数据库
import java.awt.*; import javax.swing.*; import java.awt.event.ActionListener; import java.awt.event ...
- Mac安装brew及其用法
Mac 安装 brew 及其用法: 安装brew: curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz - ...
- 程序猿学英语——In September the English learning summary
转眼间9月份又过去了,又该好好总结一下这个月的英语学习情况了. 在暑假快结束的时候.9期师姐给我们測了英语快照.当初測的时候就发现一个问题:当測自己听过尤其是读过的东 西的时候,自己都能听出来.測自己 ...
- Linux 下查看线程信息
1. 使用 pstree -p PID ps aux | grep firefox | grep -v grepcharles 26058 0.0 0.0 4908 1152 ? ...
- Visual Studio 项目目录下的bin目录和 obj目录
一.Bin目录 Visual Studio 编译时,在bin 目录下有debug 和 release 目录. 1.Debug: 通常称为调试版本,它包含调试信息,所以要比Release 版本大很多(可 ...
- 利用函数的惰性载入提高 javascript 代码性能
在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题.例如,我们最常见的为 dom 节点添加事件的函数 ...
- MySQL参数文件位置
对于linux/unix: mysql --help|grep my.cnf /etc/my.cnf, /etc/mysql/my.cnf, /usr/local/etc/my.cnf, ~/.m ...