使用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

版权

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