记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应该也是转换成中文了的。
以上都是个人根据这几个现象进行的猜想,并没有对源码进行阅读。但是确实是一种比较符合要求的解决办法,因此在此记录。