記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應該也是轉換成中文了的。

　　以上都是個人根據這幾個現象進行的猜想，並沒有對源碼進行閱讀。但是確實是一種比較符合要求的解決辦法，因此在此記錄。