React Component中出现意外的标记'='

Question

我可能错过了装载机吗？我认为我们应该能够在组件体中使用这些ES6函数,以避免必须执行.bind(this)语法反应文档

    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阶段.

您也可以通过安装使用预设stage-2来解决这个问题

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

并使用它像

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