广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react 装饰器报错怎么办
  • 502
分享到

react 装饰器报错怎么办

装饰器React 2023-05-14 22:05:23 502人浏览 薄情痞子
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑react 装饰器报错怎么办?React的decorators装饰器报错一、decorators装饰器报错@在初次使用React 的装饰器时,第一次在项目中

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 装饰器报错怎么办的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react 装饰器报错怎么办

本文链接: https://www.lsjlt.com/news/206648.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react 装饰器报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑react 装饰器报错怎么办?React的decorators装饰器报错一、decorators装饰器报错@在初次使用React 的装饰器时,第一次在项目中...
    99+
    2023-05-14
    装饰器 React
  • npm react 安装报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。npm react 安装报错怎么办?npm安装react时提示报错在使用npx create-react-app的安装过程中出现了6 high sever...
    99+
    2023-05-14
    React npm
  • react装饰器报错如何解决
    这篇文章主要介绍“react装饰器报错如何解决”,在日常操作中,相信很多人在react装饰器报错如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react装饰器报错如何解决”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-04
  • react key 报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react key 报错怎么办?react key值报错分析使用react的时候很容易出现key报错的问题,一般的解决方式就是,再报错的页面搜索 map ...
    99+
    2023-05-14
    React
  • webpack4 react报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。webpack4 react报错怎么办?react 项目本地升级webpack4后报错解决办法报错如上图:解决办法,进入全局安装的webpack目录下:进...
    99+
    2023-05-14
    React webpack
  • react navigation报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react navigation报错怎么办?react-navigation报错requireNativeComponent: “RNSScreenSta...
    99+
    2023-05-14
    react-native
  • webstorm react 报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。webstorm react 报错怎么办?webstorm 编辑react语法报错解决问题:解决办法:1.把 JavaScript 的版本设置为 JSX ...
    99+
    2023-05-14
    WebStorm React
  • creat react app 报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。creat react app 报错怎么办?create-react-app安装报错1. 错误原因当创建React应用时候,执行 npx create-r...
    99+
    2023-05-14
    create React
  • react+native+adb报错怎么办
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react+native+adb报错怎么办?react-native在win10下用adb报错的解决方案react-native在WIN10上面...
    99+
    2023-05-14
    adb react-native
  • react安装出错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react安装出错怎么办?react 安装及安装报错解决办法1. 安装安装react可以使用create-react-app还可以用webpack和rol...
    99+
    2023-05-14
    React
  • react native红屏报错怎么办
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react native红屏报错怎么办?react-native启动时红屏报错:Unable to load script.Make sure ...
    99+
    2023-05-14
    React react-native
  • React项目中decorators装饰器报错问题解决方案
    目录问题:问题: 我先安装了decorators: 然后运行项目就报错emmmmm: src\pages\home\cookbook\swiper.jsxLine 21: Par...
    99+
    2023-01-12
    react decorators装饰器报错 react decorators装饰器 decorators装饰器报错 React项目装饰器报错
  • react启动项目报错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react创建项目启动报错的完美解决方法一、预备知识:npm (也可以用yarn,本文以npm为例)npm介绍全称为Node Package Manage...
    99+
    2023-05-14
    项目 React
  • create-react-app安装出错怎么办
    这篇文章主要介绍了create-react-app安装出错怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。create-react-ap...
    99+
    2022-10-19
  • react的装饰器和HOC怎么应用
    本篇内容主要讲解“react的装饰器和HOC怎么应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react的装饰器和HOC怎么应用”吧! 高阶组件&...
    99+
    2022-10-19
  • win11u盘安装报错怎么办
    如果你在使用U盘安装Windows 11时遇到错误,可以尝试以下解决方法:1. 检查U盘是否正常:确保U盘没有损坏或有错误扇区。你可...
    99+
    2023-09-09
    Win11
  • python3安装pandas报错怎么办
    这篇文章主要介绍了python3安装pandas报错怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。安装pandas出错:Running setup.py (path:/...
    99+
    2023-06-15
  • yum 安装php 报错怎么办
    本文操作环境:Ubuntu 12.10系统,php5.3版,Dell G3电脑。yum 安装php 报错怎么办?使用yum安装php*时报错的解决办法# yum -y install php*注意:php53-odbc64-5.3.3-2....
    99+
    2015-12-05
    yum php
  • php fileinfo安装报错怎么办
    本文操作环境:Windows7系统、宝塔面板7.4.0版、DELL G3电脑php fileinfo安装报错怎么办?宝塔面板fileinfo扩展安装失败?解决方法:创建一个虚拟内存,当安装fileinfo过程中遇到内存不足的情况下,会自动使...
    99+
    2019-10-31
    宝塔fileinfo安装不了
  • PHP服务器安装时报错怎么办
    本篇内容主要讲解“PHP服务器安装时报错怎么办”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP服务器安装时报错怎么办”吧!我们都知道PHP的强大功能,我们就为大家烦恼的PHP服务器安装做出详...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作