react设置static defaultProps报错问题解决

今天做个简单的demo，老是报static defaultProps语法错误，代码如下


import React,{Component} from 'react';
import ReactDOM from 'react-dom';class Button extends  Component{constructor(props) {super(props);}static defaultProps = {color:'blue',text:'Confirm',}render(){const{ color,text} = this.props;return (<button className={`btn btn-${color}`}><em>{text}</em></button>)}
}
ReactDOM.render(<Button color="red" text="Danger!"  />,document.getElementById('app')
);

报错如图

Module build failed: SyntaxError: F:/reactdemo/reactapp/main.js: Unexpected token (10:24)8 |9 |     }
> 10 |     static defaultProps = {|                         ^11 |         color:'blue',12 |         text:'Confirm',13 |     }

最后查查资料，发现如果babel设置为es6的转码方式，会报错，因为定义静态属性不属于es6，而在es7的草案中。ES6的class中只有静态方法，没有静态属性。
由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以defaultProps要写在组件外部。

解决方案
将babel设置为es7的转码方式，在项目下安装babel-preset-stage-0

npm install babel-preset-stage-0 --save-dev

在项目根目录配置.babelrc文件

{"presets": ["es2015", "stage-0"]
}

webpack.config.js配置文件修改

module: {rules: [ {test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel-loader',query: {presets: ['es2015', 'react','stage-0']}}]}

加入stage-0后就能尝试es7语法了，static也能在class内部定义属性了！

react设置static defaultProps报错问题解决相关推荐

Please change the shape of y to (n_samples,), for example using ravel().python3报错问题解决
A column-vector y was passed when a 1d array was expected. Please change the shape of y to (n_sample ...
tez引擎跑hive 语句报错问题解决
tez引擎跑hive 语句报错问题解决现象: Container [pid=151320,containerID=***] is running beyond physical memory lim ...
Node.js 、Newman安装配置及报错问题解决
Node.js .Newman安装配置及报错问题解决 Node.js 下载: Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. 你可以根据不同平 ...
Android应用数据清理命令（adb clear）的使用执行报错问题解决
Android应用数据清理命令(adb clear)的使用&执行报错问题解决清理应用数据我们在调试 Android 应用时,经常需要清理应用数据,在手机设置里找,当然也可以做到清理数据,但 ...
django 使用json.dumps转换queryset的datatime报错问题解决
django 使用json.dumps转换queryset的datatime报错问题解决参考文章: (1)django 使用json.dumps转换queryset的datatime报错问题解决 ( ...
python3的urllib2报错问题解决方法
python3的urllib2报错问题解决方法参考文章: (1)python3的urllib2报错问题解决方法 (2)https://www.cnblogs.com/marsggbo/p/66229 ...
mysql max字符串报错_mysql [Warning] max_join_size报错问题解决办法
文章介绍了关于mysql [Warning] max_join_size报错问题解决办法,有需要的同学看看. 100716 06:32:45 d started 100716 6:32:45 [War ...
ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url
ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url WARNING: sanitizing uns ...
java.sql.SQLException: Access denied for user ‘‘@‘localhost‘ (using password: NO)报错问题解决
java.sql.SQLException: Access denied for user ''@'localhost' (using password: NO)报错问题解决参考文章: (1)jav ...

react设置static defaultProps报错问题解决

react设置static defaultProps报错问题解决相关推荐

最新文章

热门文章