在 React 中设置状态的语法错误

Question

这是我收到的错误：

ERROR in ./src/components/CustomHeader.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (17:10)

  15 | class CustomHeader extends Component {
  16 | 
> 17 |     state = {activeItem: 'home'};
     |           ^
  18 | 
  19 |     handleItemClick = (e, {name}) => this.setState({activeItem:name});
  20 |

她是我的 webpack.config.js 档案：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: "cheap-eval-source-map",
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.css$/,
                loader: [ 'style-loader', 'css-loader' ],
                include: path.join(__dirname, 'src'),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader',
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'sass-loader',
                }],
            }

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        inline: true,
        hot: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            hash: true,
        })
    ]
}

.babelrc 文件：

{
  "presets": [
    "react",
    "env"
  ]
}

我需要更改设置状态的方式吗？还是我需要将其他东西导入到我的项目中？任何帮助，将不胜感激。谢谢

（注意：我现在使用的代码直接取自 Semantic UI Examples。）

Answer 1

您需要 stage-2 preset

或

您可以使用 babel-plugin-transform-class-properties.
如果您不想使用 stage-2 并坚持使用更稳定的阶段。

在 BabelJS 上尝试你的组合并选择你的毒药。

在 React 中设置状态的语法错误

SyntaxError on setting state in React

reactjs

webpack

babeljs

semantic-ui-react

babel-loader