ReactJS 语法错误：意外的令牌

Question

我在我的 ReactJS 应用程序上获得了 Unexpected Token。但我相信语法是正确的。

import React, { Component } from 'react';

class Auth extends Component {
    constructor(){
        super()
        this.state={
            authStatus: "Sign In",
            isAuthenticated: false
        }
    }
    AuthMe = () =>{
        console.log("Working")
    }
    render() {
        return (
            <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
        );
    }
}

export default Auth;

./src/components/Auth/index.js 中的错误 模块构建失败：SyntaxError: Unexpected token (11:11)

> 11 |     AuthMe = () =>{
     |            ^
  12 |         console.log("Working")
  13 |     }

我错过了什么？

更新

这是我的 webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [
        path.resolve(__dirname, 'node_modules'),
      ],
      loader: 'babel-loader',
    }]
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css']
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true
  }
};

.babelrc

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy"]
}

Answer 1

试试：

class Auth extends Component {
    constructor(){
        super()
        this.state={
            authStatus: "Sign In",
            isAuthenticated: false
        }
    }
    AuthMe() {
        console.log("Working")
    }
    render() {
        return (
            <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
        );
    }
}

注意：AuthMe 不仅仅是一个常规函数，也不是一个粗箭头函数，如果这对你很重要的话。

编辑（评论后）

使用胖箭头函数作为类函数不是标准的 ES6 语法（the proposal 目前是第 2 阶段），因此您需要一个 additional babel plugin 来添加该功能。

更多详情请见this answer。

Answer 2

我之前在这里回答过这个问题：Arrow Function syntax not working with webpack?

TLDR 是那个胖箭头还没有在 ES201whatever 标准中。您需要添加一个额外的 babel 转换。

npm install --save-dev babel-plugin-transform-class-properties

编辑：看到上面的 babelrc 配置，运行上面然后将 .babelrc 更改为

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Answer 3

使用 var AuthMe 或 const AuthMe 代替 AuthMe

import React, { Component } from 'react';

    class Auth extends React.Component {
        constructor(){
            super()
            this.state={
                authStatus: "Sign In",
                isAuthenticated: false
            }
        }
        var AuthMe = () =>{
            console.log("Working")
        }
        render() {
            return (
                <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
            );
        }
    }

    export default Auth;