cannot be used as a JSX component

已于 2022-09-19 17:22:11 修改
阅读量7k 收藏 1
点赞数 3
分类专栏： React & Redux 文章标签： javascript react.js typescript
于 2022-09-19 17:21:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43544179/article/details/126938006
版权

从外面引入的组件，报其不是 JSX Component 的错误，但是翻看官方文档的写法，是没有问题的

这一般是 @types/react 的版本和 TypeScript 版本不匹配造成的

查看 TypeScript 版本：

> npm view typescript version

查找 @types/react 和 TypeScript 版本的对应关系：

https://www.npmjs.com/package/@types/react

点击 versions

比如 ts 版本是 3.3 就换 17.0.0 的 @types/react

再查 @types/react-dom 与 TypeScript 版本的对应关系

修改 package.json

如果这种修改会带来一大堆问题，但是人家是编成功了，就用 yarn install

Ranye123
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何解决 “Component cannot be used as a JSX component“
CloudJay的博客
09-13 1978
在tsconfig.json中加入以下代码,将依赖指向项目里的node_modules。原因是react版本与@types/react版本不一致导致的,改完后代码大概是长这样的。
custom-scrollbars：ScrollBars定制工具
02-04
自定义滚动条 该工具旨在帮助您自定义下一个项目的滚动条。 这里的示范 :backhand_index_pointing_right: 关于该项目 该项目使用动态预览更改并生成最终代码。 学分 用 :red_heart_selector: 通过（
React提示Button不能被用作JSX组件（‘Button‘ cannot be used as a JSX component)
qq_28081057的博客
11-10 1090
在vscode中typescript版本不兼容，出现异常提示
antd DatePicker throws error “cannot be used as a JSX component“ DatePicker抛出错误“不能用作JSX组件”
最新发布
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-06 599
DatePicker throws error "cannot be used as a JSX component" DatePicker抛出错误“不能用作JSX组件”
react-es6-component:自动绑定方法（例如非es6 JSX版本）的ES6 React Component会自动执行
05-13
ReactES6组件 该组件绑定其方法，例如老式的React.createClass，以便“ this”指向正确的事物。 用法 import Component from 'react-es6-component' ; class MyComponent extends Component { render ( ) { return ( < div> < button onClick = { this . _magicAutoboundMethod } / > < / div > ) ; } _magicAutoboundMethod ( ) { this . setState ( { foo : 'bar' } ) ; } }
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 正式发布了，喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。 Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 项目创建 npm init vite-app vite-vue cd vite-vue npm install npm run dev 我们发现创建的目录解构很简单 使用 JSX Vue 3.0 直接支持
‘XXX’ cannot be used as a JSX component 原因
weixin_45954775的博客
11-03 5256
react 对应ts 版本一致或者返回的是一个jsx数组而不是单个 JSX 元素
‘View‘ cannot be used as a JSX component
FE-阿阳的博客
08-17 2841
'View' cannot be used as a JSX component。
React中提示Button不能用作JSX组件
m0_66809099的博客
06-17 1702
今天新建umi项目的时候去引入antd的组件.老是一直爆红。就可以啦 (记住自己的文件要把react引入进来哦)
前端开发小问题总结
程序员超超的博客
06-11 623
前端开发小问题总结。
jsx编辑器：JSX Live编辑器
02-05
JSX Live编辑器 发展历程 # dev yarn dev # build yarn build
帕格as-jsx-loader
02-06
用于webpack的pug-as-jsx加载程序 安装 npm install pug-as-jsx-loader --save-dev 用法 webpack.config.js module . exports = { module : { rules : [ { test : / \. pug $ / , use : [ 'babel-loader' , 'pug-as-jsx-loader' ] } ] } } 模板（./file.pug） div h1 {period.start} ~ {peri
Workshop-JSX-Component
02-10
Create React App入门该项目是通过。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
React_Services_component
04-30
快速开始 安装依赖项 npm install 本地服务 npm run server 量产 npm run build 版本 1.0.0 通过阿纳斯·阿尔普雷（Anas Alpure）
jsx-next:JSX for Vue 3
03-19
适用于Vue 3.0的Babel插件JSX 添加Vue JSX支持。 English | 安装 使用以下命令安装插件： npm install @vue/babel-plugin-jsx -D 然后将插件添加到.babelrc中： { "plugins" : [ "@vue/babel-plugin-jsx" ] } ...
‘App‘ cannot be used as a JSX component. Its return type ‘Element[]‘ is not a valid JSX element.
余香
10-29 8183
记录最近在用ts写react遇到的一个问题： 代码如下： function App() { const nameArray:string[] = ['Bob','Jack','Mary']; return( nameArray.map((name:string)=>{ return( <div>{name}</div> ) }) ) } 然后报错： ‘App’ cannot be used as a JSX compo
react重新下载依赖报错：‘Link‘ cannot be used as a JSX component.
lucky569的博客
05-05 4067
报错原因： 启动老项目，执行reinstall成功之后（reinstall为项目自配置脚本：） 项目可运行，但代码类型校验没通过，报错如下： f12查看定义类型的位置，从而定位到错误 是@types/react中类型报错，然后查看package.json中版本号为18.0.6： npm中查看这个包文件，18.0.6为最新刚发版的，大胆猜测一波，因为没固定版本号 在重新install的时候安装了最新版本，从而导致项目中跟最新版本的东西有些对不上，所以报错了。 于是 在大胆解决一波，在package.jso
React 安装 报错“Modal不能用作jsx组件”
weixin_46124208的博客
07-13 1751
React 安装 报错“Modal不能用作jsx组件”
Text strings must be rendered within a <Text> component.
06-07
这不是一个问题，而是一个错误信息。这个错误通常出现在 React Native 应用程序中，它意味着你试图在一个不合适的地方渲染文本字符串。解决这个问题的方法是将文本字符串包装在`<Text>`组件中，例如： ```jsx <Text>这是一个文本字符串</Text> ``` 请注意，在 React Native 中，你不能像在普通的 HTML 中一样，在任何地方直接渲染文本。你必须使用`<Text>`组件将文本包装起来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值