React JS 不支持箭头函数（ES6 语法）答案

【问题标题】：React JS is not supporting arrow function (ES6 syntax)React JS 不支持箭头函数（ES6 语法）
【发布时间】：2020-11-14 15:06:49
【问题描述】：

我正在构建一个 React JS 项目。在我的项目中，我使用的是新的 ES6 语法的箭头函数。但是当我运行项目时它会引发错误。我正在使用 Webpack 来编译我的代码。

这是我的 webpack.config.js 文件。

const HTMLWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: [ 'babel-polyfill', './src/index.js' ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    plugins: [
        new HTMLWebPackPlugin({ template: path.join(__dirname, '/build/index.html') })
    ],
    devServer:{
        port:5200
    }
};

我在项目根文件夹中有 .babelrc 文件，内容如下。

{
  "presets": [
    "es2015", "react",
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

在一个 React 组件中，我声明一个箭头函数如下。

addBackDrop = e => {
        if(this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) {
            this.showDatePicker(false);
        }
    }

函数在类组件中。

当我运行“npm run dev”时，出现以下错误。

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Acer\Desktop\way-ui-react\node_modules\babel-preset-es2015\lib\index.js

我的配置有什么问题，我该如何解决？

【问题讨论】：

这对您的问题有帮助吗？ stackoverflow.com/a/42064325/11866037
事实证明这不是“npm run dev”的问题。它运行良好。渲染使用箭头函数的组件时会弹出问题。
@KaungKhantZaw。我刚刚发布了一个答案。为加入而欢呼。这很有帮助。

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

这是一个功能组件吗？如果是这样，您需要在函数名称前添加 const

【讨论】：

没有。它是一个类组件。

【解决方案2】：

这将解决问题。 .babelrc 文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

【讨论】：

【解决方案3】：

您好，我认为问题在于您错过了括号" addBackDrop = (e) => "

addBackDrop = (e) => {
        if(this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) {
            this.showDatePicker(false);
        }
    }

【讨论】：

在大多数开发设置中，单参数箭头函数不需要括号