Ant Design升级后,使用日期范围组件DatePicker.RangePicker时候会碰到一个警告信息“‘DatePicker.RangePicker‘ cannot be used as a JSX component.”,虽不影响程序正常运行,但有警告信息存在总是让程序代码规范感觉没有彻底。举个例子,比如在Card组件的extra属性上设置日期范围组件,代码如下:
代码语言:javascript复制 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.,如何才能去掉这个警告呢?
代码语言:javascript复制const {RangePicker} = DatePicker;
修改为
const RangePicker: any = DatePicker.RangePicker;