问题描述：
使用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]} />
改成：
扫描二维码关注公众号，回复：
17519662 查看本文章
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/>