Ruby on Rails项目编译时React组件遇Unexpected token语法错误求助

开发者阿泽

2026-8-1

问题分析与解决

错误原因

你遇到的Unexpected token报错，是因为代码里用了ES类字段语法（比如state = {...}、箭头函数类方法hide = (id) => {...}），但Rails项目的Babel编译环境默认没开启对这类语法的支持。这类语法属于ES提案阶段特性，需要对应Babel插件才能被正确转译。

访问视图后错误消失，大概率是浏览器加载了之前已编译好的缓存代码，重新编译时未转译的新代码触发了语法检查报错。

解决方案

方案1：配置Babel支持类字段语法

安装对应Babel插件：
在项目根目录执行命令：

yarn add @babel/plugin-proposal-class-properties --dev
# 用npm的话执行：
npm install @babel/plugin-proposal-class-properties --save-dev

修改Babel配置文件：
在项目根目录的.babelrc或babel.config.js中添加插件配置：
```
{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
```
重启Rails编译服务（比如bin/webpack-dev-server或rails s），重新编译代码。

方案2：改用ES6标准类写法（无需额外配置）

如果不想调整Babel配置，可把类字段语法改成传统的ES6类写法：

class Our_professionals_accordion extends React.Component{
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      visible: true,
      whichComponentToShow: "Accordion",
      id_user: 0
    };
    // 绑定方法的this指向
    this.hide = this.hide.bind(this);
    this.professional = null;
  }

  hide(id){
    this.setState({whichComponentToShow: "Info"})
    this.professional = this.props.users.find(item => item.id === id);
  }

  // 后续render方法保持不变...
}