导致的原因
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
2.如果是自定义组件,且react 对应ts 版本一致
返回的是 JSX 元素数组,而不是单个 JSX 元素。
//错误写法
// ⛔️ '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;