‘XXX’ cannot be used as a JSX component 原因

导致的原因

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': 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;