关于ES6类的实例属性及在React组件中的应用

首先,我们看一下ES6类的定义与转化成对应ES5的写法

关于ES6类的实例属性及在React组件中的应用

上面的class对应的是ES6构造函数的写法。

与之对应的是下面ES5的构造函数的写法。然后我再看AntDesign官方文档发现可以用实例属性简写。类似下图。

关于ES6类的实例属性及在React组件中的应用关于ES6类的实例属性及在React组件中的应用

这样写的好处一个是可以减少代码量。而且不需要额外绑定this。但是这要额外配置,babel-loader并不能通过。

transform-class-properties需要添加这个插件。才能编译通过。

babel官方详情链接:https://babeljs.io/docs/plugins/transform-class-properties/