antd DatePicker throws error “cannot be used as a JSX component“ DatePicker抛出错误“不能用作JSX组件”

问题描述：

使用ts时，引入antd DatePicker 组件时会报警告，编辑器里报红，代码下有红色波浪线！！
虽然不影响运行，但是看着爆红很难受。

鼠标放上去提示：

“DatePicker”不能用作 JSX 组件。
  其实例类型 "Component<PickerProps<Moment> & { status?: "" | "error" | "warning"; dropdownClassName?: string; popupClassName?: string; }, unknown, any> & CommonPickerMethods" 不是有效的 JSX 元素。
    在这些类型中，"render()" 返回的类型不兼容。
      不能将类型“import("d:/prod_center/node_modules/@types/react/index").ReactNode”分配给类型“import("d:/prod_center/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode”。
        不能将类型“{}”分配给类型“ReactNode”。ts(2786)

原因：

造成这个的根本原因是ts与@types/react版本不适配。

解决方法:

方案一.将@types/react的版本与ts的版本对应上即可。

查询版本对应关系
查看npm，找到二者的版本对应关系如下：https://www.npmjs.com/package/@types/react

查询本地ts版本
可以查询到本地版本为4.7.3。
执行：

npm view typescript version

查询本地@types/react版本
在package.json文件中查看，@types/react 与 @types/react-dom 的版本。

查询@types/react与ts的具体适配版本
可以看到 ts4.7适配18.0.12。

npm info @types/react

dist-tags:
latest: 18.0.12  ts2.2: 15.0.30   ts2.5: 16.0.36   ts2.8: 16.9.34   ts3.1: 16.9.49   ts3.4: 17.0.2    ts3.7: 17.0.35   ts4.0: 18.0.12   ts4.3: 18.0.12   ts4.6: 18.0.12
ts2.0: 15.0.1    ts2.3: 16.0.36   ts2.6: 16.4.7    ts2.9: 16.9.35   ts3.2: 16.9.56   ts3.5: 17.0.8    ts3.8: 17.0.39   ts4.1: 18.0.12   ts4.4: 18.0.12   ts4.7: 18.0.12
ts2.1: 15.0.20   ts2.4: 16.0.36   ts2.7: 16.4.7    ts3.0: 16.9.46   ts3.3: 17.0.0    ts3.6: 17.0.19   ts3.9: 18.0.12   ts4.2: 18.0.12   ts4.5: 18.0.12   ts4.8: 18.0.12

查询@types/react-dom与ts的具体适配版本
可以看到 ts4.7适配18.0.5。

npm info @types/react-dom

dist-tags:
latest: 18.0.5  ts2.2: 15.5.0   ts2.5: 16.0.3   ts2.8: 16.9.7   ts3.1: 16.9.8   ts3.4: 17.0.1   ts3.7: 17.0.11  ts4.0: 18.0.5   ts4.3: 18.0.5   ts4.6: 18.0.5
ts2.0: 0.14.20  ts2.3: 16.0.3   ts2.6: 16.0.6   ts2.9: 16.9.8   ts3.2: 16.9.9   ts3.5: 17.0.5   ts3.8: 17.0.11  ts4.1: 18.0.5   ts4.4: 18.0.5   ts4.7: 18.0.5
ts2.1: 15.5.0   ts2.4: 16.0.3   ts2.7: 16.0.6   ts3.0: 16.9.8   ts3.3: 17.0.0   ts3.6: 17.0.9   ts3.9: 18.0.5   ts4.2: 18.0.5   ts4.5: 18.0.5   ts4.8: 18.0.5

执行修改
修改package.json中@types/react与@types/react-dom的版本并执行npm install即可。

这个方法 需要升级依赖，还得找对版本，从github的issues来看，有的即使升级了也不行。和 react版本也有些关系。所以我没用这个方案。

方案二：自己定义一个类型

RangePicker:
这样报错：

<DatePicker.RangePicker allowEmpty={[true, true]} />

改成：

const { RangePicker }: any = DatePicker;

<RangePicker allowEmpty={[true, true]} />

DatePicker:

import {  DatePicker} from "antd";
const TDatePicker: any = DatePicker;

<TDatePicker/>

如果不想 改变 原代码 可以这样（import 时用as重命名 然后自己声明一个 DatePicker）：

import { DatePicker as TDatePicker } from "antd";
const DatePicker: any = TDatePicker;
const { RangePicker }: any = DatePicker;

 <DatePicker/>
 <RangePicker/>

参考于：https://github.com/ant-design/ant-design/issues/34952