ReactJS语法错误:意外的标记

Question

我在我的ReactJS应用程序上得到一个意外的令牌。但是我相信语法是正确的。

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/组件/身份验证/索引中的错误.js模块生成失败： 语法错误： 意外的标记 （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
  }
};

。巴伯尔克

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

Answer 1

使用 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;

Answer 2

我之前在这里回答过这个问题:箭头函数语法对webpack不起作用？

TLDR是那个胖箭头还没有在ES201任何标准中。你需要添加一个额外的巴贝尔变换。

npm安装--保存dev babel插件转换类属性

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

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

Answer 3

尝试:

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语法（目前该提案是第2阶段），因此您需要一个额外的babel插件来添加该功能。

有关更多详细信息，请参阅此答案。