如何解决 “Component cannot be used as a JSX component“

最新推荐文章于 2024-05-14 14:46:27 发布
最新推荐文章于 2024-05-14 14:46:27 发布
阅读量2.4k 收藏 3
点赞数 6
文章标签： 前端 javascript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31061615/article/details/132847848
版权
文章讲述了在React项目中，由于React版本和@types/react版本不匹配引发的问题。作者提供了在tsconfig.json中添加路径映射的解决方案，指向项目内的node_modules/@types/react，以解决类型定义问题。
摘要由CSDN通过智能技术生成

原因是react版本与@types/react版本不一致导致的,
在tsconfig.json中加入以下代码,将依赖指向项目里的node_modules

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

改完后代码大概是长这样的

{
  "compilerOptions": {
  	...
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@pages/*": [
        "src/pages/*"
      ],
      "react": [ "./node_modules/@types/react" ]
    }
    ...
}
CloudJay_喵喵喵
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-es6-component:自动绑定方法（例如非es6 JSX版本）的ES6 React Component会自动执行
05-13
用法import Component from 'react-es6-component' ;class MyComponent extends Component { render ( ) { return ( < div> < button onClick = { this . _magicAutoboundMethod } / > < / div > ) ; } _...
React_Services_component
04-30
React Services Component利用JSX来定义组件的结构和样式，使得代码更易读。 3. **服务集成**: 这个组件库强调的是服务集成，意味着组件可能包含了与后端服务交互的能力，如数据获取、状态管理等。 ### 二、安装与...
‘XXX’ cannot be used as a JSX component 原因
weixin_45954775的博客
11-03 5523
react 对应ts 版本一致或者返回的是一个jsx数组而不是单个 JSX 元素
React 安装 报错“Modal不能用作jsx组件”
weixin_46124208的博客
07-13 1839
React 安装 报错“Modal不能用作jsx组件”
【vue3】vue3中如何使用typescript
最新发布
qq_2511276124的博客
05-14 2086
现在vue3和typescript搭配使用是一个较常见的方案，下面参考vue3官网总结下在vue项目中使用ts(TypeScript)的方法。
cannot be used as a JSX component
Ranye的博客
09-19 7625
从外面引入的组件，报其不是 JSX Component 的错误，但是翻看官方文档的写法，是没有问题的。这一般是 @types/react 的版本和 TypeScript 版本不匹配造成的。如果这种修改会带来一大堆问题，但是人家是运行成功了，就用 yarn install。再查 @types/react-dom 与 TypeScript 版本的对应关系。比如 ts 版本是 3.3 就换 17.0.0 的 @types/react。修改 package.json。点击 versions。
react重新下载依赖报错：‘Link‘ cannot be used as a JSX component.
lucky569的博客
05-05 4134
报错原因： 启动老项目，执行reinstall成功之后（reinstall为项目自配置脚本：） 项目可运行，但代码类型校验没通过，报错如下： f12查看定义类型的位置，从而定位到错误 是@types/react中类型报错，然后查看package.json中版本号为18.0.6： npm中查看这个包文件，18.0.6为最新刚发版的，大胆猜测一波，因为没固定版本号 在重新install的时候安装了最新版本，从而导致项目中跟最新版本的东西有些对不上，所以报错了。 于是 在大胆解决一波，在package.jso
NextUI使用过程中遇到 Type error: ‘Component‘ cannot be used as a JSX component.
m1044248152的博客
04-09 204
问题记录：直接运行时无异常 但是编译时报以下错误。看了各种帖子尝试了很久没能解决。
‘XXX‘ cannot be used as a JSX component.
m0_57253767的博客
04-19 322
现在commit时候的报错'XXX' cannot be used as a JSX component.
帕格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' , '...
Workshop-JSX-Component
02-10
Create React App入门该项目是通过。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
dresscode:一个React Component库
04-28
DressCode-React组件库 DressCode是自己的组件库，使用实现。 关于着装守则 ... 演示版 所有组件都有相应的文件。 要查看并使用可用组件，您可以在本地运行...DressCode是未捆绑或未编译的原始JS和CSS文件的集合（JSX到ES
常用API和常见错误总结
Andy Blog
02-16 1958
API Unity 事件函数的执行时机和先后顺序 void Awake() { Debug.Log("Awake"); } void OnEnable() { Debug.Log("OnEnable"); } public void CustomRethod() { Debug.Log("CustomRethod"); } // Use this for initia...
‘App‘ cannot be used as a JSX component. Its return type ‘Element[]‘ is not a valid JSX element.
余香
10-29 8259
记录最近在用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
‘LeftMenu‘ cannot be used as a JSX component.
weixin_43858446的博客
08-17 3228
​ 最近刚开始学习react，编写完类组件，使用时发现报错，错误如下： TS2786: 'LeftMenu' cannot be used as a JSX component. Its instance type 'LeftMenu' is not a valid JSX element. Type 'LeftMenu' is missing the following properties from type 'ElementClass': context, setState, forceUpdat
‘DatePicker.RangePicker‘ cannot be used as a JSX component.
AnJoker的博客
04-13 6958
'DatePicker.RangePicker' cannot be used as a JSX component.
React的React.StrictMode
weixin_46605745的博客
03-05 961
（Stric tMode）是严格模式，用来标记潜伏的问题，为元素触发额外的检查和警告 注意:严格模式检查只在开发模式运行，不会和生产模式冲突 import React from 'react'; function App() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne />
Text strings must be rendered within a <Text> component.
06-07
这不是一个问题，而是一个错误信息。这个错误通常出现在 React Native 应用程序中，它意味着你试图在一个不合适的地方渲染文本字符串。解决这个问题的方法是将文本字符串包装在`<Text>`组件中，例如： ```jsx <Text>这是一个文本字符串</Text> ``` 请注意，在 React Native 中，你不能像在普通的 HTML 中一样，在任何地方直接渲染文本。你必须使用`<Text>`组件将文本包装起来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值