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”即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑
react 装饰器报错怎么办?
React的decorators装饰器报错
在初次使用React 的装饰器时,第一次在项目中使用 @
会报错,原因是react默认是不支持装饰器的,所以才会报错,所以是需要做一些配置来支持装饰器。
【报错显示:Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.】
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())
{ "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 => 打上勾勾
推荐学习:《react视频教程》
以上是react 装饰器报错怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

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

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

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

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

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

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

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

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


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver Mac版
视觉化网页开发工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3汉化版
中文版,非常好用

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

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