【坑】antd 汉化、国际化语言配置失效 （设置中文不起作用）

最近做一个新项目，react + ts +antd ^3.26.0,在国际化全局配置之后，发现日历的语言并没用变成我设置的中文，百度找了也没有例子，然后看了 ^3.26.0版本的antd语言包和之前版本项目语言包进行了对比，发现了新版本的antd ^3.26.0居然没有配置日期的汉化。

---

一、问题截图

在App入口的时候进行了全局的语言包配置

import React, { memo } from 'react'
import zhCN from 'antd/es/locale/zh_CN'
import { ConfigProvider } from 'antd'
import Router from 'src/router'

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Router />
    </ConfigProvider>
  )
}

export default memo(App)

结果年显示了，而其他的月日周几都还是英文的

然后又用antd日期提供的单独的语言配置方法,试了结果还是一样

import locale from 'antd/es/date-picker/locale/zh_CN'
<DatePicker locale={locale} />

---

二、新版本antd与低版本比较

比较项	新版^3.26.0	^3.19.8之前版本	结论
版本	^3.26.0	^3.19.8	版本跨度其实很小，源码变化多
推荐方法	ConfigProvider	LocaleProvider	只是方法变了，语言包路径变了，问题不大
中文语言包			新版的直接把日期的汉化去掉了

其实说白了就行发现，新版的antd的中文语言包里的年月日星期的翻译被去掉了，咱也不知道为啥。

---

三、解决方案

moment.js大家都知道是专门处理时间日期的库，antd的日期也是引用的这个库，moment/locale/zh-cn 这个路径下的语言包就很给力了，

那我们就直接拿来使用就好了，配置方法 Moment官网

import React, { memo } from 'react'
import zhCN from 'antd/es/locale/zh_CN'
import { ConfigProvider } from 'antd'
import Router from 'src/router'
import moment from 'moment'//在原有的基础上加上下面三行代码
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Router />
    </ConfigProvider>
  )
}

export default memo(App)

效果图

---

有的小伙伴会问了，既然用了moment的语言包，antd的ConfigProvider是不是可以去掉了，是可以去掉，但显示的时候会有点小问题，你要是觉得问题不大就直接去掉就好了，最好是一起写，毕竟antd设置语言包的地方很多，你不知道别的地方有没有影响。

四、最终优化版

import React, { memo } from 'react'
import zhCN from 'antd/es/locale/zh_CN'
import { ConfigProvider } from 'antd'
import Router from 'src/router'
import 'moment/locale/zh-cn'
///import moment from 'moment' //没错就是注释了两行代码
///moment.locale('zh-cn')

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Router />
    </ConfigProvider>
  )
}

export default memo(App)

可以这么写的原因是antd的这个语言包（'antd/es/locale/zh_CN' ）里面有一行这个

他的效果就类似于moment里的moment.locale('zh-cn')，能少两行代码就少两行还是不错的。

Github 地址：https://github.com/babybrotherzb

CSDN 博客地址：https://blog.csdn.net/weixin_43648947