Antd TimePicker.RangePicker引入报错：元素类型无效问题求助

嘿，我一眼就看出问题出在哪啦！你遇到的这个错误，核心原因是**TimePicker.RangePicker在你当前使用的Ant Design版本里根本不存在**，解构出来的RangePicker是undefined，所以React没法渲染它，才抛出了这个元素类型无效的异常。

下面根据你使用的Ant Design版本，给出对应的解决方案：

如果你用的是Ant Design 4.x及以上版本 #

从Antd 4开始，时间范围选择器已经被整合到DatePicker组件中，不再属于TimePicker模块了。你需要修改导入和使用方式：

1. 调整导入和解构代码
   把你代码里的：

   import { Form, Input, DatePicker, Button, TimePicker } from 'antd';
   // ...
   const { RangePicker } = TimePicker;
   

   改成：

   import { Form, Input, DatePicker, Button, TimePicker } from 'antd';
   // 从DatePicker中解构RangePicker
   const { RangePicker } = DatePicker;
   

2. 或者直接在渲染时使用完整路径
   如果你不想解构，也可以直接这么写：

   <DatePicker.RangePicker />
   

如果你用的是Ant Design 3.x版本 #

如果你的项目还在使用Antd 3.x，TimePicker.RangePicker是存在的，但可能是安装或导入环节出了问题：

• 先确认你的package.json里antd版本是3.x，或者在终端运行npm list antd查看版本
• 如果版本正确，检查是否有拼写错误，确保解构代码正确：

  const { RangePicker } = TimePicker;
  

  同时确认TimePicker已经从antd正确导入。

最后，建议你优先检查自己的Antd版本，现在绝大多数新项目都是用4.x及以上版本，所以第一种解决方案应该能解决你的问题。

内容的提问来源于stack exchange，提问作者Olof84