前言：使用antd开发的时候，发现个问题，表格分页跟部分组件会显示默认英文字符。查了下相关资料得知
antd本身带有中文语言包，当我们引入antd，就可以进行汉化了
事实上antd为了进行国际化，本身就有多个语言包
如下是没有进行汉化的情况
image.png
解决方式很简单可作如下操作：
import React from 'react
// 在需要用到的 组件文件中引入中文语言包
import zhCN from 'antd/es/locale/zh_CN';
// 引入国际化配置
import { ConfigProvider,Table } from 'antd';
export default class Demo extends React.Component{
render(){
return(
<div>
{/* 用ConfigProvider组件将表格包住 */}
<ConfigProvider locale={ zhCN }>
<Table
columns={columns}
dataSource={datas}
rowKey={(datas: { id: string }) => datas.id}
pagination = {{
showSizeChanger:true,
showQuickJumper: true,
onChange: onChangeFn,
total:datas.length,
pageSize:5,
showTotal: (count = datas.length)=>{
return '共'+datas.length+'条数据'
},
defaultCurrent: 1,
pageSizeOptions: ['5','10']
}}
/>
</ConfigProvider>
</div>
)
}
}
这样表格的分页每页多少条就会变成中文了，还有很多比如日期选择框什么的刚引用也是英文的都可以用这种方法变成中文。
问题
哈哈，这个时候大家肯定会想着，该不会每次用需要使用中文，都要用 ConfigProvider 包起来吧，这未免太过繁琐。
解决方案肯定是有的，还很多，我这里选择在最外曾包裹住，然后子集路由页面就都可以作用到了。
我这里使用的是umi框架搭建，所以解决方式也是如此，在最外层路由加上就好了
优雅的最终解决
在跟目录 src 下新建 layouts/index.tsx
import React, { useState, useEffect } from 'react';
import zhCN from 'antd/es/locale/zh_CN';
import { ConfigProvider } from 'antd';
const index = (props:any) => {
return (
<div>
<ConfigProvider locale={zhCN}>
<div>{ props.children }</div>
</ConfigProvider>
</div>
);
}
export default index;
我的路由是这样的，
routes: [
{
path:'/*',
exact: true ,
component:'@/layouts/index',
routes:[
{ path: '/', component: '@/pages/demoDva/index' },
{ path: '/demo1/users', component: '@/pages/demo1/users' },
{ path: '/demo2', component: '@/pages/demo2/index' },
{ path: '/index', component: '@/pages/index' },
]
},
],
这样类似走下去就肯定是OK的
附上一张完成的了的图哈
image.png
好了，这样是不是就非常OK了
