‘DatePicker.RangePicker‘ cannot be used as a JSX component.

Posted 2023-02-27 xiangzhihong8

Ant Design升级后，使用日期范围组件DatePicker.RangePicker时候会碰到一个警告信息“‘DatePicker.RangePicker‘ cannot be used as a JSX component.”，虽不影响程序正常运行，但有警告信息存在总是让程序代码规范感觉没有彻底。举个例子，比如在Card组件的extra属性上设置日期范围组件，代码如下：

 import React from 'react';
   import  Card, DatePicker  from "antd";
   const RangePicker = DatePicker;
   
   const HomePage: React.FC = () => 
   
   	const cardExtra = (
    	<div>
      	<RangePicker
        	onChange=onHandleDateRangerChange
        	onOk=onHandleDateOk
        	defaultValue=
          	beginDate && endDate
            	? [moment(beginDate, dateFormat), moment(endDate, dateFormat)]
            	: undefined
        	
        	style=
          	fontWeight: 'normal',
          	width: '260px',
        	
      	/>
    	</div>
    	);
    	
    	return (
    	<>
    	    ...
    		<Card title=' ' extra=cardExtra>
    		</Card>
    		...
    	</>);
    
    ;
    
    export default HomePage;

上述代码编译运行没有问题，但在WebStorm IDE开发环境中，RangePicker上有一个警告提示‘DatePicker.RangePicker‘ cannot be used as a JSX component.，如何才能去掉这个警告呢？

const RangePicker = DatePicker;
修改为
const RangePicker: any = DatePicker.RangePicker;