react启用mobx @decorators装饰器语法

react如果没有经过配置,直接使用decorators装饰器语法会报错:
Support for the experimental syntax ‘decorators’ isn’t currently enabled
在这里插入图片描述
因为react默认是不支持装饰器语法,需要做一些配置来启用装饰器语法。

step1:

在 tsconfig.json 中启用编译器选项 “experimentalDecorators”: true
vscode点击设置,输入搜索experimentalDecorators
在这里插入图片描述

step2:

安装支持修饰器所需依赖。

yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/preset-env

创建.babelrc文件,配置

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}]]
}
step3:

安装依赖

yarn add -D customize-cra react-app-rewired

在项目根目录下创建 config-overrides.js 并写入以下内容,覆盖默认配置。

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')function resolve(dir) {return path.join(__dirname, dir)
}const customize = () => (config, env) => {config.resolve.alias['@'] = resolve('src')if (env === 'production') {config.externals = {'react': 'React','react-dom': 'ReactDOM'}}return config
};
module.exports = override(addDecoratorsLegacy(), customize())
step4:

修改package.json文件中 scripts 脚本。

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

上面4个步骤配置完成后,如果mobx修饰器还是不起作用,就可能是mobx版本有问题,执行step5。

step5:

执行下面命令

yarn add -D mobx@5 mobx-react@5

执行到step5,就能成功使用mobx修饰器了。

注意,如果报错
Parsing error: Cannot use the decorators and decorators-legacy plugin together
在这里插入图片描述
可以创建.eslintrc.js文件,配置即可解决eslint报错问题

parserOptions: {parser: 'babel-eslint',ecmaFeatures: {// 支持装饰器legacyDecorators: true,},},

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学术会议征稿】第三届能源互联网及电力系统国际学术会议(ICEIPS 2024)

第三届能源互联网及电力系统国际学术会议(ICEIPS 2024) 2024 3rd International Conference on Energy Internet and Power Systems 能源互联网是实现新一代电力系统智能互动、开放共享的重要支撑技术之一,也是提升能源调度效率&#xff0…

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT 1、安装依赖 sudo apt update sudo apt-get install g gdb gcc cmake sudo apt install libpoco-dev uuid-dev libncurses5-dev python3-dev python3-pip python3 -m pip install protobuf3.14.02、下载CyberRT源码 git cl…

python+pygame实现五子棋人机对战之三

上回讲过: pythonpygame实现五子棋人机对战之一 pythonpygame实现五子棋人机对战之二 界面已经有了,并且可以支持鼠标操作选择菜单和人机对战开始下棋了,那电脑是如何应手落子呢?以下内容是通用的类,全部放在utils.…

全球高端销量第一 凯迪仕智能锁建博会获重磅大奖再次遥遥领先

2024年7月11日,第26届中国广州建博会圆满落幕。Kaadas凯迪仕第11年受邀参展,凭借超吸睛的赛博风展馆和重磅旗舰传奇大师K70系列智能锁震撼亮相,吸引抖音网红云集打卡直播以及众多主流及行业媒体聚集报道。在大家居建装行业全球第一展的舞台上…

问题清除指南|Dell OptiPlex 7070 升级 win11 开启 TPM 2.0 教程

前言:最近想把实验室台式机的系统从 Windows 10 升级到 Windows 11,遇到一点小问题,在此记录一下解决办法。 ⚠️ 注:本教程仅在 Dell OptiPlex 7070 台式机系统中测试有效,并不保证其余型号机器适用此教程。 参考链接…

中国科学院地理所牛书丽团队《Global Change Biology 》最新成果!

本文首发于“生态学者”微信公众号! 在全球气候变化的背景下,干旱地区的扩张对生态系统的氮循环产生了深远影响。氮同位素(δ15N)的天然丰度,尤其是土壤中的δ15N,是评估陆地生态系统氮循环动态和氮限制的关…

【ARMv8/v9 GIC 系列 1.7 -- GIC PPI | SPI | SGI | LPI 中断使能配置概述】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC 各种中断使能配置PPIs(每个处理器私有中断)SPIs(共享外设中断)SGIs(软件生成的中断)LPIs(局部中断)GIC 各种中断使能配置 在ARM GICv3和GICv4架构中,不同类型的中断(如PPIs、SPIs、SGIs和LPIs)可以通过不同的方式进…

分享:2024好的ai文章生成器下载资源 tzqsbic

在当今数字化的时代,ai技术的发展日新月异,为我们的生活和工作带来了诸多便利。其中,ai文章生成器作为一项创新的工具,给当代人们带来了很多好处,尤其是对于很多创作者,不仅能解决创作困难,而且…

【开发工具】webStrom2024版-永久使用

1、解压文件 2、安装步骤 先执行unistall-current-user.vbs,确保当前环境变量下没有历史使用记录。再执行install-current-user.vbs。运行的时候,会有第一个弹窗,点击确定,稍微等待一会,会出现 Done 的弹窗&#xff0…

【Linux】进程间通信之System V共享内存

👦个人主页:Weraphael ✍🏻作者简介:目前正在学习c和算法 ✈️专栏:Linux 🐋 希望大家多多支持,咱一起进步!😁 如果文章有啥瑕疵,希望大佬指点一二 如果文章对…

Prometheus+Grafana监控Linux主机

1、安装Prometheus 1.1 、下载Prometheus 下载网址 https://github.com/prometheus/prometheus/releases选择需要的版本 wget https://github.com/prometheus/prometheus/releases/download/v2.53.0/prometheus-2.53.0.linux-amd64.tar.gz1.2、安装Prometheus软件 1.2.1、…

解决鸿蒙开发中克隆项目无法签名问题

文章目录 问题描述问题分析解决方案 问题描述 在一个风和日丽的早晨,这是我学习鸿蒙开发的第四天,把文档过了一遍的我准备看看别人的项目学习一下,于是就用git去clone了一个大佬的开源项目,在签名的时候遇到了问题: h…

在攻防演练中遇到的一个“有马蜂的蜜罐”

在攻防演练中遇到的一个“有马蜂的蜜罐” 有趣的结论,请一路看到文章结尾 在前几天的攻防演练中,我跟队友的气氛氛围都很好,有说有笑,恐怕也是全场话最多、笑最多的队伍了。 也是因为我们遇到了许多相当有趣的事情,其…

【leetcode】滑动窗口专题

文章目录 1.长度最小的子数组2.无重复字符的最长子串3.最大连续1的个数III4.将x减小到0的最小操作数5.水果成篮6.找到字符串中所有字母异位词7.串联所有单词的子串8.最小覆盖子串 1.长度最小的子数组 leetcode 209.长度最小的子数组 看到这个题目,第一眼肯定想到的…

科普文:深入理解Mybatis

概叙 (1) JDBC JDBC(Java Data Base Connection,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组成.JDBC提供了一种基准,据此可以构建更高级的工具和接口,使数据库开发人员能够编写数据库应用程序。 优点…

Vue3 + Echarts堆叠折线图的tooltip不显示问题

问题介绍 使用Echarts在Vue3Vite项目中绘制堆叠折线图的的时候,tooltip总是不显示,经过很长时间的排查和修改,最后发现是在使用上有错误导致的。 错误图片展示 问题原因 由于Vue3底层使用proxy代理创建示例,使用其创建出来的实…

FPGA-Verilog-Vivado-软件使用

这里写目录标题 1 软件配置2 FPGA-7000使用2.1 运行启动方式 1 软件配置 编辑器绑定为Vscode,粘贴VS code运行文件的目录,后缀参数保持不变: 如: D:/Users/xdwu/AppData/Local/Programs/Microsoft VS Code/Code.exe [file name]…

(19)夹钳(用于送货)

文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器,这对送货应用和落瓶很有用。 按照下面的链接(或侧边栏),根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…

职业教育人工智能实验实训室建设应用案例

随着人工智能技术的快速发展,其在职业教育领域的应用逐渐深入。唯众作为一家专注于教育技术领域的企业,积极响应国家关于人工智能教育的政策号召,通过建设人工智能实验实训室,为学生提供了一个实践操作与创新思维相结合的学习平台…

34 超级数据查看器 关联图片

超级数据查看器app(excel工具,数据库软件,表格app) 关联图片讲解 点击 打开该讲的视频 点击访问app下载页面 豌豆荚 下载地址 大家好,今天我们讲一下超级数据查看器的关联图片功能 这个功能能让表中的每一条信息&…