搜索
首页web前端前端问答react 装饰器报错怎么办
react 装饰器报错怎么办Jan 05, 2023 am 11:50 AM
react装饰器

react装饰器报错的解决办法:1、通过“create-react-app mobx-study”创建项目;2、通过“yarn add -D react-app-rewired customize-cra”安装插件;3、修改package.json文件中scripts脚本;4、在项目根目录下创建“config-overrides.js”和“.babelrc”即可。

react 装饰器报错怎么办

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑

react 装饰器报错怎么办?

React的decorators装饰器报错

一、decorators装饰器报错@

在初次使用React 的装饰器时,第一次在项目中使用 @
会报错,原因是react默认是不支持装饰器的,所以才会报错,所以是需要做一些配置来支持装饰器。

【报错显示:Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.】
9f2b4184b659acd2a7844185d04a684.jpg

1. 创建项目

npm install -g create-react-app  
// 安装create-react-app,已安装请忽略
create-react-app mobx-study

2. 安装插件 —— 改变 create-react-app 中 webpack 配置

yarn add -D react-app-rewired customize-cra 
yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/preset-env

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

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

4. 在项目根目录下创建 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())

5. 在项目根目录下创建 .babelrc 并写入以下内容

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

基本完成以上步骤就可以正常使用装饰器了,再也不会报 @ 的错误了。同时Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled这个错误也将消失。

二、对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig” 或 “jsconfig” 中设置 “experimentalDecorators” 选项以删除此警告。ts(1219)

设置 => 搜索experimentalDecorators => 打上勾勾
69ed60144c1e352af844712617b988f.jpg

推荐学习:《react视频教程

以上是react 装饰器报错怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

手把手教你用装饰器扩展 Python 计时器手把手教你用装饰器扩展 Python 计时器Apr 13, 2023 pm 08:46 PM

这是我们手把手教你实现 Python 定时器的第三篇文章。前两篇:分别是手把手教你实现一个 Python 计时器​,和用上下文管理器扩展 Python 计时器​,使得我们的 Timer 类方便用、美观实用。但我们并不满足于此,仍然有一个用例可以进一步简化它。假设我们需要跟踪代码库中一个给定函数所花费的时间。使用上下文管理器,基本上有两种不同的选择:1. 每次调用函数时使用 ​Timer:with Timer("some_name"): do_something()当我们在一

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

Python中的装饰器和上下文管理器是如何工作的?Python中的装饰器和上下文管理器是如何工作的?Oct 20, 2023 pm 07:04 PM

Python中的装饰器和上下文管理器是如何工作的?在Python中,装饰器和上下文管理器是两个非常有用的概念和功能。它们都是为了简化代码、增加代码可读性以及方便代码的重用。一、装饰器装饰器是Python中一种用于修改函数的行为的特殊函数。它允许我们在不修改原始函数的情况下对其进行包装或拓展。装饰器在许多Python的框架和库中被广泛使用,比如Flask、Dj

react native怎么删除组件react native怎么删除组件Apr 21, 2022 pm 04:10 PM

react native可以利用“npm uninstall --save 组件”删除组件;npm可用于管理第三方组件包,参数设置为uninstall时,可用于删除软件包,参数“--save”表示会从“packages.json”中获取包。

VSCode插件分享:一个实时预览Vue/React组件的插件VSCode插件分享:一个实时预览Vue/React组件的插件Mar 17, 2022 pm 08:07 PM

在VSCode中开发Vue/React组件时,怎么实时预览组件?本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件,希望对大家有所帮助!

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境