React中static defaultProps报错问题

如果babel设置的是es6的转码方式，在es6中使用static defaultProps会报错，因为定义静态属性不属于es6，而在es7的草案中。ES6的class中只有静态方法，没有静态属性。

es6定义defaultProps的正确写法如下：

import React from 'react';

class ShouYe extends React.Component {
    constructor(props, context) {
        super(props, context);
    }
    render() {
        return (
            <div>
                {this.props.content}
            </div>
        )
    }
}
//由于是用es6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以defaultProps要写在组件外部。
ShouYe.defaultProps = {
    content: <div>00560</div>
}
export default ShouYe

解决方案：

1. 将babel设置为es7的转码方式

// 安装babel
npm install babel-core babel-loader --save-dev

// 支持 ES6/ES2015 
npm install babel-preset-es2015 --save-dev

// 使用 JSX
npm install babel-preset-react --save-dev

// 使用 ES7 特性
npm install babel-preset-stage-0 --save-dev

2. 在项目根目录配置.babelrc文件 加入stage-0

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

import React from 'react';

class ShouYe extends React.Component {
    static defaultProps = {
        content: <div>00560</div>
    }
    constructor(props, context) {
        super(props, context);
    }
    render() {
        return (
            <div>
                {this.props.content}
            </div>
        )
    }
}
export default ShouYe

转载于:https://my.oschina.net/linxiaoxi1993/blog/3075308