ReactJs,带有`static defaultProps`的SyntaxError

Question

我使用React来编写这个演示.我使用Webpack来构建这个demo.当我开始这个演示时,错误将显示给我.

./src/app.js中的错误模块构建失败:SyntaxError:意外的令牌(8:24)

 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 (){
        return (
            <button className={'btn btn-${color}'}>
                <em>{text}</em>
                <p>This is a button.</p>
            </button>
        );
    }
}
ReactDOM.render(<Button />, document.getElementById('app'));

我从一本书中读到了这个演示.由于该书可能打印错误的代码.所以我现在问这个问题.

错误显示static defaultProps = {不对.这本书也是用这个表格写的.你知道正确的代码吗？

Answer 1

终端npm install --save-dev babel-preset-stage-0在当前目录中执行.

添加stage-0到当前目录*.babelrc*文件

{ "Presets": ["react", "es2015", "stage-0"], }}

Answer 2

这可能是您的设置中出现一些错误webpack。否则defaultProps被正确定义。

获取您需要使用的道具的另一件事this.props.propName

检查下面的代码 -

class Button extends React.Component {
    constructor(props){
        super(props);

    }
    static defaultProps = {
        color:'blue',
        text: 'Confirm'
    }
    render (){
        return (
            <button className={'btn btn-${this.props.color}'}>
                <em>{this.props.text}</em>
                <p>This is a button.</p>
            </button>
        );
    }
}
ReactDOM.render(<Button />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>