antd全局中文化配置

前言

日常开发中经常使用 antd, 记录一下全局中文化配置

场景

平时开发中 antd 中的 DatePicker ,Modal , Transfer等组件有时会成为英文化的情况

应用

在layout中引入中文化配置(最外层)

重点

1. 引入ConfigProvider：使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效；
2. 引入中文包
3. 设置moment 语言包

代码实现

import React from 'react';
import ReactDOM from 'react-dom';
import { Routes } from './router/index';
import configureStore from './redux/store';
import { Provider } from 'react-redux';

// 以下三行是中文化的关键代码
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import 'moment/locale/zh-cn';

let store = configureStore();
ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <Provider store={store}>
      {Routes}
    </Provider>
  </ConfigProvider>
  ,
  document.getElementById('root')
);