React 组件中的意外标记“=" [英] Unexpected token '=' in React Component

问题描述

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

 ./client/admin-side/components/Form.jsx 中的错误模块构建失败:语法错误:意外令牌 (15:17)14 |>15 |handleChange = (事件) =>{|^16 |this.setState({value: event.target.value})17 |}

我的 .babelrc 有以下内容:

<代码>{预设":[环境"，反应"]，插件":[转换对象休息传播"]}

我正在使用 babel-loader 来处理 js/jsx 文档

解决方案

需要使用transform-class-properties plugin来使用class字段，你可以像

一样安装

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

并将其用作插件

<代码>{预设":[环境"，反应"]，插件":[转换对象休息传播"，转换类属性"]}

transform-object-rest-spread 用于其余扩展语法，类似于

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

根据文档::><块引用>

这里提出了两个相关的提议:"class instance fields" 和类静态字段".

类实例字段" 描述旨在存在于类的实例(并且可以选择包含初始化程序所述属性的表达式).

类静态字段" 是存在于类对象本身(并且可以选择包含初始化程序所述属性的表达式).

此提案目前处于第 2 阶段.

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

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

并像使用它一样

<代码>{"预设": ["env", "react", "stage-2"],插件":[转换对象休息传播"]}

Am I missing a loader possibly? I thought we were supposed to be able to use these ES6 functions in component bodies to avoid having to do the .bind(this) syntax 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 |     }

My .babelrc has the following:

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

and I am using babel-loader for js/jsx documents

解决方案

You need to use transform-class-properties plugin to use class fields, You can install it like

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

and use it as a plugin

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

transform-object-rest-spread is used for the rest spread syntax which is like

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

According to the documentation:

This presents two related proposals: "class instance fields" and "class static fields".

"Class instance fields" describe properties intended to exist on instances of a class (and may optionally include initializer expressions for said properties).

"Class static fields" are declarative properties that exist on the class object itself (and may optionally include initializer expressions for said properties).

This proposal is currently at Stage 2.

You can also solve this by using preset stage-2 by installing

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

and using it like

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

这篇关于React 组件中的意外标记“="的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！