ant design 使用中的一些tips

Posted 2021-02-09 ybleeho

使用 ant design 当中总结的一些小tips 和issue

 

1. 时间类组件的 value 类型为 moment 对象，所以在提交服务器前需要预处理。如Timepicker，Datepicker。

2.TimePicker 设置 minuteStep ，选择hour，默认把现在时间的分钟赋值给minute，也就是会选择不符合规则的时间。

有关issue：  https://github.com/ant-design/ant-design/issues/9906

我的解决办法：Dynamic verification。

1 verification = (value) =>{
2     if(!value) return;
3     if(moment(value).minute()!==0&&moment(value).minute()!==30){
4         this.props.form.setFieldsValue({
5             time: value.minutes(0),
6         });
7     }
8 }

3. TimePicker中无法表示一天的结束 如00:00 到 24:00（下一天00:00）

相关issue： https://github.com/react-component/time-picker/issues/95

解决办法：使用Cascader组件 组装成moment选择时分的组件。

4.即时搜索（实时搜索）

使用AutoComplete组件，也是antd 十大原则之一  ——即时反应

https://ant.design/docs/spec/reaction-cn

https://ant.design/components/auto-complete-cn/

5.Notification 通知提醒组件在切换其他页面的时候，如何给他消失？

解决办法：使用notification.destroy()

componentWillUnmount(){
    notification.destroy();
}

在componentWillUnmount生命周期销毁notification

6.Notification  config的 getContainer配置渲染节点问题。

issue：https://github.com/ant-design/ant-design/issues/6036