Question

我使用React编写此演示。我使用Webpack来构建这个演示。当我开始演示时，错误将显示给我。

./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 * file

{ "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>

ReactJs，带有`static defaultProps`的SyntaxError

2 个答案: