React中提示XXX不能用作JSX组件

已于 2023-03-07 08:25:52 修改
阅读量4.5k 收藏 3
点赞数 2
文章标签： react.js 前端 typescript
于 2023-03-06 13:53:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72237725/article/details/129360579
版权

1.在公司项目中，多个页面出现过报错，在开发后发现对页面没有影响，一直没有进行处理，后来再次处理的时候没有找到问题发生的情况，在CSDN找到帖子，使用如下的方式解决了文件报错

此时发现自己封装的组件仍旧提示 "xxx"不能用作JSX组件，后来查询发现原因是ts与@types/react版本不适配，由于版本问题导致的提示报错，大家可以查询自己项目中的@types/react版本和ts版本进行更换，

查询本地ts版本

npm view typescript version

查询本地@types/react版本

在package.json文件中查看

 报错原因https://www.npmjs.com/package/@types/react?activeTab=versions

长安雨似花
关注
vue中jsx自定义按钮组件
lfg8098709的博客
01-24 1202
vue中jsx自定义按钮组件
【React】后台开发学前端 04 - React组件01 - JSX, 类组件
goalietang的专栏
09-18 198
经过上篇文章的介绍，我已经能够搭建一套React的项目框架，并且在框架中保留了基础的可运行的结构。然后我们修改了App.js后得到了一个Hello，World！界面。接下来我们需要一起来了解下构成react页面的基本元素了。
React提示Button不能被用作JSX组件（‘Button‘ cannot be used as a JSX component)
qq_28081057的博客
11-10 1640
在vscode中typescript版本不兼容，出现异常提示
针对Umi、React中遇到的 “xxxx”不能用作 JSX 组件 问题解决方案
weixin_54607676的博客
02-23 1591
例如，如果您的项目依赖于 package-a 和 package-b，而这两个包都依赖于 package-c，但它们依赖于 package-c 的不同版本，这会导致冲突。在某些情况下，您的项目依赖项可能需要不同的版本，而这些版本之间可能存在冲突。这意味着当 npm 安装依赖项时，它将使用 1.2.x 系列中的最新版本来解决 package-a 和 package-b 之间的冲突。当某些安全扫描工具（例如fossa）扫描出项目依赖的子依赖版本需要升级的情况，也可以尝试使用此方法来解决。
解决Umi初始化项目引入Antd组件报错“xxx“不能用作 JSX 组件
m0_71485750的博客
07-16 3369
因为你的其他库依赖了@types/react或者@types/react-dom，比如项目安装了react-router这个库, 而这个库又安装了18版本的@types/react，导致多个ts校验不通过。: 尝试在package.json里面添加以下配置：版本改为你指定的版本就好。: 在使用umi初始化项目后, 所有从antd引入的组件全部报。
React 安装 报错“Modal不能用作jsx组件”
weixin_46124208的博客
07-13 1945
React 安装 报错“Modal不能用作jsx组件”
“DatePicker”不能用作 JSX 组件。
qq_46544185的博客
04-24 239
3.清理工作目录中未被 Git 跟踪的文件和目录git clean -dfx。删除node_moudles,重新install（有效）1.@types\react和ts版本对应不上。在package.json加上如下代码（无效）因为项目更新，代码检查出现【“DatePicker”不能用作 JSX 组件】的提示。2.删除node_moudles,重新install（无效）可以运行，但是看起来很难受。
React组件——类组件
m0_58471238的博客
01-15 6753
React组件——类组件
react笔记_05类组件
qq_43260366的博客
07-05 999
若是第一个参数为函数：当调用setState函数时，react会自动调用该函数，并将当前state与props传入，因此在该函数中是可以获取当前实例对象的state 与props的。这是因为setState更新数据是异步的，若是想要在通过setState修改数据后，立即拿到修改后的数据，可以使用setState的第二个参数。添加之后就会将该dom以键值队的形式添加到refs对象中。react的三大属性其实是实例化对象的三大属性，由于函数组件是没有实例化的，因此将这三大属性称为类组件的三大属性。
react项目配置（类组件、函数式组件）
weixin_43993776的博客
09-22 804
changeMsg()}>修改变量
【React学习】JSX、生命周期、脚手架
Stay Hungry, Stay Foolish!
12-01 968
文章目录1 React入门1.1 React基础认识1.2 React基本使用1.3 React JSX1.3.1 JSX1.3.2 虚拟DOM1.3.3 渲染虚拟 DOM(元素)1.4 模块与组件、模块化与组件化的理解2 React 面向组件编程2.1 自定义组件2.2 组件三大属性2.2.1 state2.2.2 props2.2.3 refs2.2.4 事件处理2.3 功能界面的组件化编码流程2.4 收集表单数据2.5 组件生命周期2.5.1 生命周期流程图2.5.2 生命周期详述2.5.3 重要的勾
”不能用作JSX组件。其返回类型“Promise”不是有效的JSX元素
zouzouwu的博客
04-06 257
解决办法：将组件的异步数据删除，把异步数据的获取放到prop里面，异步数据函数放到父页面page里面。在写一个组件的时候使用了async,await.组件不让使用异步函数。
react使用antd组件提示不能做为jsx组件
hypo的博客
08-04 1353
这是typescript的版本问题，使用ctrl+command+P输入typescript选择项目本身的版本。另外typescript里配置的jsx配置为react-jsx，在文件中可以省略react的引入。我的是hypo-admin项目，所以选择这个版本就可以了。
react+ts 引入antd组件时提示 “XXX”不能用作 JSX 组件。
m0_47668952的博客
01-19 966
react+ts 引入antd组件时提示 “XXX”不能用作 JSX 组件。
react+umi项目中引入antd组件报错:“Button”不能用作 JSX 组件解决方案
qq_44472790的博客
09-25 2132
错误解决方案
‘View‘ cannot be used as a JSX component
FE-阿阳的博客
08-17 3073
'View' cannot be used as a JSX component。
antd DatePicker throws error “cannot be used as a JSX component“ DatePicker抛出错误“不能用作JSX组件”
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-06 1101
DatePicker throws error "cannot be used as a JSX component" DatePicker抛出错误“不能用作JSX组件”
报错：JSX 元素类型“Link”不具有任何构造签名或调用签名。 ts(2604)“Link”不能用作 JSX 组件。
ARandeCSDN的博客
07-14 796
报错原因：解决：
react xxx 不能用作 JSX 组件-工作中遇到的问题
qq_43853213的博客
04-29 4309
最近总是遇到这样的问题 之前百度没有找到问题 直接使用忽略TS 提示可以隐藏掉这个报错 {/* @ts-ignore */} // @ts-ignore
qrcode.react库
最新发布
09-14
qrcode.react是一个用于React框架的库，它提供了一种便捷的方式来生成和展示二维码图片。该库使用了JavaScript的qrcode库来生成二维码，并通过React组件的形式，让开发者可以在React应用中轻松集成二维码功能。 qrcode.react库的主要特点包括： 1. 易用性：只需通过props传递数据，即可生成对应的二维码。 2. 灵活性：允许开发者通过props自定义二维码的大小、颜色等属性。 3. 可集成性：作为一个React组件，可以很方便地嵌入到React应用的任何组件中。 该库通常被用于生成网站的分享链接、支付二维码、联系方式名片等场景。 使用qrcode.react的示例代码如下： ```jsx import React from 'react'; import QRCode from 'qrcode.react'; const MyComponent = () => { const data = "https://www.example.com"; return ( <QRCode value={data} size={256} level={"H"} includeMargin={true} fgColor={"#000000"} bgColor={"#ffffff"} /> ); } export default MyComponent; ``` 在上述示例中，我们创建了一个React组件`MyComponent`，其中使用了`QRCode`组件生成了一个二维码，并通过props设置了二维码的链接地址、尺寸、错误校正级别、边距、前景色和背景色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值