ReactJs，带有 `static defaultProps` 的 SyntaxError

IT技术 reactjs
2021-04-30 20:47:34

我使用 React 来编写这个演示。我使用 Webpack 构建此演示。当我启动此演示时，会显示错误。

./src/app.js module构建失败：语法错误：意外令牌 (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 = {不正确。这本书也是用这种形式写成的。你知道正确的代码吗？

2个回答

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

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

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

您的webpack设置可能存在一些错误。否则defaultProps被正确定义。

访问您需要使用的props的另一件事 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>

其它你可能感兴趣的问题
上一篇如何在react js中保留浏览器后退按钮上应用的过滤器 下一篇Laravel ReactJs：更改我的 js(reactjs) 文件后未反映更改