React组件中的意外令牌'='

Question

我可能会缺少装载机吗？我以为我们应该能够在组件主体中使用这些ES6函数，而不必执行.bind(this)语法reactdocs

    ERROR in ./client/admin-side/components/Form.jsx
Module build failed: SyntaxError: Unexpected token (15:17)

  14 | 
> 15 |     handleChange = (event) => {
     |                  ^
  16 |         this.setState({value: event.target.value})
  17 |     }

我的.babelrc具有以下内容：

{
    "presets": ["env", "react"],
    "plugins": ["transform-object-rest-spread"]
}

我正在使用babel-loaderjs / jsx文档

Answer 1

您需要使用transform-class-properties plugin才能使用类字段，您可以像安装它

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

并将其用作插件

{
    "presets": ["env", "react"],
    "plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

transform-object-rest-spread 用于其余的传播语法，例如

const {a, b, ...rest} = this.props

根据 文档 ：

提出了两个相关的建议："class instance fields"和 "class static fields"。

"Class instance fields" 描述打算在类的实例上存在的属性（并且可以选择包括用于所述属性的初始化器表达式）。

"Class static fields" 是存在于类对象本身上的声明性属性（并且可以选择包括所述属性的初始化程序表达式）。

该提案目前处于 第二阶段 。

您还可以通过以下方式使用预设的阶段2解决此问题：

npm install --save-dev babel-preset-stage-2

并像这样使用

{
    "presets": ["env", "react", "stage-2"],
    "plugins": ["transform-object-rest-spread"]
}