導(dǎo)致的原因
1.如果你升級(jí)了react v18
可能導(dǎo)致是類似antd組件報(bào)錯(cuò) 要確認(rèn)react ts 版本是否適配，如圖安裝對(duì)應(yīng)版本ts。以及嘗試更新react ，react-dom。更新后 重新運(yùn)行項(xiàng)目
//安裝最新版本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文章來源：http://www.zghlxwxcb.cn/news/detail-579348.html
2.如果是自定義組件，且react 對(duì)應(yīng)ts 版本一致
返回的是 JSX 元素?cái)?shù)組，而不是單個(gè) JSX 元素。文章來源地址http://www.zghlxwxcb.cn/news/detail-579348.html
//錯(cuò)誤寫法
// ?? '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;
到了這里，關(guān)于‘XXX’ cannot be used as a JSX component 原因的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
