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

时间:2018-02-15 07:31:07

标签: reactjs babel

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

    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-loader来获取js / jsx文件

2 个答案:

答案 0 :(得分:11)

您需要使用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

根据 documentation

  

这提出了两个相关的提案:"class instance fields"和   "class static fields"

     

"Class instance fields"描述了要存在的属性   类的实例(可以选择包括初始化程序)   所述属性的表达式)。

     

"Class static fields"是存在于其中的声明性属性   类对象本身(可以选择包括初始化程序   所述属性的表达式。)

     

此提案目前处于第2阶段

您也可以通过安装

使用预设第2阶段来解决此问题
npm install --save-dev babel-preset-stage-2

并使用它

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

答案 1 :(得分:0)

你不能添加第0阶段的预设

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

并且不要忘记运行

yarn add babel-preset-stage-0