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

原创已于 2023-04-12 11:26:17 修改 · 801 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

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

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

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));