记Ant Design中MonthPicker组件国际化问题

组件官方地址:https://ant.design/components/date-picker-cn/

目前使用的是3.10.10版本

所以月份选择器使用的是<MonthPicker/>

4.0版本官方使用的是<DatePicker picker="month"/>

遇到的问题:

  <MonthPicker/>使用时,没有给默认值,即使全局用了国际化配置,但是选择的时候还是默认英文。

解决方案:

  根据官方文档

// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';

<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;

   这样子是可以解决,但是要设置默认值,这有点不符合需求。而且会有新问题,如果按删除按钮后,又会恢复英文。

  查阅API的时候发现 defaultPickerValue 这个属性也是传moment对象的,于是设置了这个属性,成功解决国际化问题。

个人总结:

  这个组件应该是根据组件里moment对象来确定显示国际化内容,最初版本是空,应该默认为英文了。

  后来设置了默认值,传入了moment对象,这时候组件读取了moment对象,应该也顺便读取了moment对象里的国际化内容,于是显示中文。

  但是当删除了这个默认值时,组件又开始取最初默认值,导致又变回英文。

  通过设置defaultPickerValue,将国际化确定为中文的moment传给组件,组件每次选择的时候会先使用传入的moment,因此可以成功显示中文。后续修改的过程中,moment应该也是转换成中文了的。

  以上都是个人根据这几个现象进行的猜想,并没有对源码进行阅读。但是确实是一种比较符合要求的解决办法,因此在此记录。

 

  

猜你喜欢

转载自www.cnblogs.com/lighter-jh/p/12531837.html