使用Mobx装饰器报错：Support for the experimental syntax ‘decorators‘ isn‘t currently enabled

wild__programmer

已于 2023-04-12 11:26:17 修改

阅读量720

点赞数

文章标签： javascript 开发语言

于 2023-04-11 22:24:15 首次发布

本文链接：https://blog.youkuaiyun.com/wild__programmer/article/details/130094972

版权

文章介绍了在MobX6之前的版本中，由于默认不支持装饰器，需要通过安装`babel-plugin-transform-decorators-legacy`和`@babel/plugin-proposal-decorators`来配置项目。在package.json中添加相应的Babel插件设置后，可以使用`@observable`和`@action`等装饰器在类中定义状态和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react mobx装饰器配置

前序：由于6版本之前的mobx需要用到装饰器@observable @action 这些默认情况下不支持。

默认已经下载好了 npm i mobx mobx-react
暴露出脚手架配置 npm run eject
安装装饰器所需依赖

npm install --save-dev babel-plugin-transform-decorators-legacy

安装应用配置 `

npm install @babel/plugin-proposal-decorators

package.json中添加配置

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

测试
文件 stores/module/baseStore.js

import {observable, action } from "mobx"
class Base {
    name = 'hello world';
    @observable value = 1;
    @action increment() {
        this.value++
    }
}
export default new Base;

文件 page/index.js

import {Outlet, Link } from "react-router-dom";
import { observer, inject } from 'mobx-react';
import { Button } from "antd";

const HomePage= ({ baseStore, children }) => {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <h1>{children}</h1>
      <Button onClick={() => {baseStore.increment()}}>增加</Button>
      {baseStore.value}
      <Outlet />
    </div>
  );
}

export default inject('baseStore')(observer(HomePage));