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…

SQL 存储过程

SQL(Structured Query Language)的存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,它经编译后存储在数据库中,用户通过指定存储过程的名字并给它传递参数(如果有的话&#xff09…

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…

【代码随想录算法训练Day65】卡码网47.参加科学大会、卡码网94. 城市间货物运输 I

Day65 图论第九天 卡码网47.参加科学大会 #include <iostream> #include <vector> #include <list> #include <queue> #include <climits> using namespace std; // 小顶堆 class mycomparison { public:bool operator()(const pair<int, …

Android Studio gradle下载失败?!

Android Studio安装后第一个工程&#xff0c;往往要下载gradle&#xff0c;而gradle的下载有的时候很慢&#xff0c;可以将下载好的gradle-x.x.x-all.zip放到指定目录下&#xff1a; Windows下路径&#xff1a; C:\Users\你的用户名\.gradle\wrapper\dist\gradle-x.x.x-all\**…

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

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

LiteOS 多线程编程

​ 鸿蒙系统的多线程编程步骤&#xff1a; 1. 描述要创建的线程的属性配置. attr: attributeosThreadAttr_t attr;//声明一个线程属性变量memset(&attr, 0, sizeof(attr));//memset改变一个内存单元上存的值为0//以下三个为必须设置的线程属性attr.name "ledThread&q…

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

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

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

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

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

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

【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

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

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

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

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

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

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、…

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

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

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

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

Spring JDBC 具名参数用法

Spring JDBC中具名参数的用法 maven引入Spring jdbc <dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>5.3.19</version></dependency> 在Spring配置中配置 <!-…

【leetcode】滑动窗口专题

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

正则表达式控制everything等搜索工具更快速的对需要的内容进行检索

正则表达式对文件搜索工具规则 表格模式 匹配模式描述abgr(ale)y匹配 “gray” 或 “grey”.匹配除换行符之外的任意单个字符[abc]匹配字符 “a”、“b” 或 “c” 中的任意一个[^abc]匹配除了 “a”、“b”、“c” 之外的任意单个字符[a-z]匹配小写字母 a 到 z 之间的任意一…