导致的原因
1.如果你升级了react v18
可能导致是类似antd组件报错 要确认react ts 版本是否适配，如图安装对应版本ts。以及尝试更新react ，react-dom。更新后 重新运行项目
//安装最新版本react react-dom
yarn add @types/react@latest @types/react-dom@latest --dev
//安装指定版本
yarn add @types/react@18.0.34
查看@types/react和ts适配版本：https://www.npmjs.com/package/@types/react文章来源：https://www.toymoban.com/news/detail-579348.html
2.如果是自定义组件，且react 对应ts 版本一致
返回的是 JSX 元素数组，而不是单个 JSX 元素。文章来源地址https://www.toymoban.com/news/detail-579348.html
//错误写法
// ⛔️ 'App' cannot be used as a JSX component.
// Its return type 'Element[]' is not a valid JSX element.
// Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key
const App = () => {
return ['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
});
};
//正确写法
const App = () => {
return (
//using a React fragment or a element.div
<>
{['a', 'b', 'c'].map(element => {
return
<h2 key={element}>{element}</h2>;
})}
</>
);
};
export default App;
到了这里，关于‘XXX’ cannot be used as a JSX component 原因的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
