React中Decorator语法报错（Unexpected token）求助

嘿，这个问题我之前踩过坑！你碰到的Unexpected token (@)错误，本质是装饰器（Decorator）语法目前还不是ECMAScript的正式标准，默认的React编译工具链（比如Babel）没有开启对它的支持，所以没法识别@开头的装饰器语法。而普通的函数调用withVisible()(App)是标准的JS函数柯里化写法，自然能正常编译。

下面根据不同的项目类型，给你具体的解决步骤：

1. 如果你用的是Create React App（CRA）创建的项目 #

CRA默认把Babel配置藏起来了，没法直接改，有两种方式处理：

方法一：用react-app-rewired + customize-cra（推荐，不用弹出配置） #

• 先安装依赖：

  npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators --save-dev
  

• 在项目根目录新建config-overrides.js文件，写入以下配置：

  const { override, addDecoratorsLegacy } = require('customize-cra');
  
  module.exports = override(
    addDecoratorsLegacy()
  );
  

• 把package.json里的启动脚本修改为：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  

• 重启开发服务器，现在装饰器语法应该就能正常运行了。

方法二：弹出CRA配置（不推荐，弹出后无法回退到默认配置） #

• 执行弹出命令：

  npm run eject
  

• 在弹出后的package.json中找到babel配置块，添加装饰器插件（注意要设置legacy: true）：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
  }
  

2. 如果你是自定义Webpack+Babel的项目 #

直接修改Babel配置即可：

• 先安装插件：

  npm install @babel/plugin-proposal-decorators --save-dev
  

• 修改你的.babelrc或者babel.config.js文件：

  {
    "presets": ["@babel/preset-react"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      "@babel/plugin-proposal-class-properties" // 如果你用到类属性语法，建议一起添加
    ]
  }
  

• 重启Webpack开发服务器就完成配置了。

3. 如果你用TypeScript编写React #

直接修改tsconfig.json的编译配置：

• 在compilerOptions中添加以下两项：

  {
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true // 若需要装饰器的元数据支持，可选开启
    }
  }
  

  这样TypeScript编译器就能识别装饰器语法了，如果同时使用Babel，确保Babel配置也兼容即可。

验证你的代码 #

配置完成后，你的原代码就能正常运行了：

import React from 'react';
import Fade from './Transitions/Fade';
import withVisible from './withVisible';

@withVisible()
const App = props => (
  <Fade visible={props.visible} duration={500}>
    Hello
  </Fade>
);

export default App;

另外，你的withVisible高阶组件写法完全没问题，是标准的柯里化高阶组件，配置正确后装饰器语法就能正常解析它啦。

内容的提问来源于stack exchange，提问作者Istvan Orban