react项目配置装饰器

1.创建react项目并安装支持装饰器的依赖

npm install -g create-react-app
create-react-app my-first-react-app
npm install --save-dev @babel/plugin-proposal-decorators

2.在.babelrc文件中配置Babel插件:

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

3. React中配置config-overrides.js文件

安装插件
npm install react-app-rewired customize-cra --save-dev
修改package.json,例如使用 react-app-rewired start 替代 npm start。
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

4.在config-overrides.js文件中配置添加装饰器支持的插件

const { override, addBabelPlugin} = require('customize-cra');

module.exports = override(
   addBabelPlugin([
    '@babel/plugin-proposal-decorators', {legacy: true}
   ]),
);

基于以上的这些配置就可以在组件里面使用装饰器了。如果3,4步骤不执行好像启动react项目后装饰器的一直报错。原因不明。百度搜了好多都没啥好的解决方案, 特此记录一下。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】简单工厂模式(Simple Factory Pattern)

工厂模式(Factory Pattern) 用于创建不同类型的奖品对象。您可以创建一个奖品工厂,根据配置的类型来实例化相应的奖品对象。 public interface Prize {void award(); }public class MoneyPrize implements Prize {Overridepublic void awar…

一、初识Django

简介 Django 是一个用于构建 Web 应用程序的高级 Python Web 框架。 版本对应 不同版本的django框架是基于特定的不同的python版本开发的,所以不同版本的django框架要正常执行功能只能安装特定的python版本 Django安装 安装 Django # 全局安装 pip install dj…

实战干货|Spark 在袋鼠云数栈的深度探索与实践

Spark 是一个快速、通用、可扩展的大数据计算引擎,具有高性能、易用、容错、可以与 Hadoop 生态无缝集成、社区活跃度高等优点。在实际使用中,具有广泛的应用场景: 数据清洗和预处理:在大数据分析场景下,数据通常需要…

C/C++ 入门(9)编译链接

个人主页:仍有未知等待探索-CSDN博客 专题分栏:C 目录 一、域 1、分类 2、搜索顺序 二、编译链接 1、代码在形成可执行文件的过程 2、符号表 三、问题 1、带有缺省参数的函数声明和定义分离 一、域 1、分类 域:全局域、局部域、命…

CSS-IN-JS Emotion

为什么会有css-in-js 优点 缺点 使用emotion插件库 npm i emotion/core emotion/styled使用时需要解析css属性 使用方式一: 通过注释告诉babel不讲jsx转化为react.create Element的调用,而是转化为jsx语法。会导致一个警告react未使用。 使用方式二&am…

对虾病害分类数据集889张7类别

数据集类型:图像分类用,不可用于目标检测无标注文件 数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):889 分类类别数:7 类别名称:["baibanbing","bai…

Vitis HLS 学习笔记--Schedule Viewer 调度查看器

目录 1. 简介 2. Schedule Viewer详解 2.1 视图说明 2.1.1 Operation\Control Step 2.1.2 周期关系图 2.1.3 Schedule Viewer 菜单栏 2.1.4 属性视图 2.2 内容说明 2.2.1 实参(b)解释 2.2.2 实参(a)解释 2.2.3 变量&am…

TCP协议在物联网中的实战

一、TCP协议介绍 网上对TCP协议介绍众多,本人按照自己的理解简单介绍一下。 TCP(Transmission Control Protocol, 传输控制协议)是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

MongoDB安装(windows)

mongodb 的安装(windows) 下载软件 官网下载:https://www.mongodb.com/ 安装 1.双击打开MSI包 2.同意协议 3.选择安装形式 complete:默认安装,不可以修改安装地址 custom:自定义安装【推荐】 4.选择安装路径和…

【c++leetcode】35. Search Insert Position

问题入口 二分搜索 时间复杂度O(logn) class Solution { public:int searchInsert(vector<int>& nums, int target) {int start 0;int end nums.size() - 1;while (start < end){int mid (start end) / 2;if (nums[mid] target){return mid;}else if(nums…

Axure如何调起浏览器的打印功能

Axure如何调起浏览器的打印功能 答&#xff1a;javascript:window.print(); 不明白的继续往下看 应用场景&#xff1a; 原型设计中&#xff0c;页面上的打印按钮&#xff0c;需要模拟操作演示&#xff0c;需要点击指定的按钮时&#xff0c;唤起浏览器的打印功能&#xff08…

QT httpServer多线程后台服务器的例子实现

1.需求 1.1 用户需要其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;获取想要的数据并实时显示在网页里&#xff0c;比如实时的温湿度&#xff0c;用户数据等 1.2 用户需要在其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;下发数据…

使用 GitHub Actions 实现项目的持续集成(CI)

目录 什么是 GitHub Actions 基础概念 Workflow 文件 Workflow 语法 实例&#xff1a;编译 OpenWrt 什么是 GitHub Actions GitHub Actions 是 GitHub 推出的持续集成&#xff08;Continuous Integration&#xff0c;简称 CI&#xff09;服务它允许你创建自定义工作流&am…

【webrtc】MessageHandler 3: 基于线程的消息处理:以sctp测试为例

消息处理可以用于模拟发包处理G:\CDN\rtcCli\m98\src\net\dcsctp\socket\dcsctp_socket_network_test.cc 这个实现中,onMessage还是仅对了一种消息进行处理,就是接收则模式下,打印带宽。当然,可能程序有多个消息,分别在不同的onmessage中执行?SctpActor:以一个恒定的速率…

【webrtc】MessageHandler 1: 基于线程的消息处理:以10毫秒处理音频为例

基于m98 G:\CDN\rtcCli\m98\src\audio\null_audio_poller.h分发的消息由MessageHandler 类通过其抽象接口OnMessage 实现处理 NullAudioPoller NullAudioPoller 是一个处理audio的消息的分发器 poll 启动:

Adobe Firefly 3.0 AI 图像生成器来了

Adobe 发布其 Midjourney 和 Dall-E 3 竞争对手Firefly 2.0已经半年了。几天前&#xff0c;他们发布了Firefly 3.0&#xff08;目前处于测试阶段&#xff09;&#xff0c;这是他们最新的文本到图像人工智能工具&#xff0c;其中包含一些非常酷的更新。在我们深入了解细节之前&a…

开发一个语音聊天社交app小程序H5需要多少钱?

社交&#xff0c;即时通讯APP系统。如何开发一个社交App||开发一个即时通信应用是一项复杂而充满挑战的任务&#xff0c;需要考虑多个技术、开发时间和功能方面的因素。以下是一个概要&#xff0c;描述了从技术、开发时间和功能角度如何开发这样的应用&#xff1a; 1. 技术要点…

Docker-compose的介绍与用法

Docker-compose Docker Compose 是一个开源的容器编排工具&#xff0c;由 Docker 官方开发。它允许开发者定义一个或多个 Docker 容器作为单个服务&#xff0c;并将这些服务组合成一个项目。这些定义被保存在一个 YAML 文件中&#xff0c;称为 docker-compose.yml。 使用 Dock…

低代码技术在构建质量管理系统中的应用与优势

引言 在当今快节奏的商业环境中&#xff0c;高效的质量管理系统对于组织的成功至关重要。质量管理系统帮助组织确保产品或服务符合客户的期望、符合法规标准&#xff0c;并持续改进以满足不断变化的需求。与此同时&#xff0c;随着技术的不断进步&#xff0c;低代码技术作为一…

Qt下使用7Z源码进行压缩和解压缩

7Z压缩是一款常用的压缩算法和工具&#xff0c;本文主要介绍一款在qt环境下进行编译的压缩方法。 本人测试是可以正常跑通的&#xff0c;具体代码部分请下载&#xff1a;下载链接&#xff0c;提取码&#xff1a;ev9t 7z源码网址&#xff1a;7-Zip 7z简介&#xff1a; 7z 是…
最新文章