antd.pro中表格的国际化处理

antd.pro最近更新额V5版本，于是使用了最新的版本。V5版本抛弃了dva的数据流配置方式(狗头：原因就是配置太繁琐了，你要为每个module配置module文件，并且使用generator的方式作异步请求，然后在请求service.......，)，对于刚入手antd.pro的童鞋来说十分的不友好，我在接触V4版本的时候，花了两天的时间才完全打通了所有的环节。V5就相对来说简单的多了，好处的话在官网都有说明，在这里只简单的说两点。

回归React的hooks函数

你所有使用usestate的地方，框架都会自动的映射到全局中，就像我们之前使用redux配置的store一样，只不过是自动完成的，不需要我们配置一系列的配置文件。

request的方式状态和缓存区分

之前使用redux的时候感觉很混乱，该放的不该放的东西我们都会放到store中，redux的初衷应该是只用于存放一些状态state，而不是一些缓存的数据，比如最常见的data list(后台返回的数据，这部分按道理应该存在缓存中，并不需要或者说不应该放到redux中)，至于怎么处理的，我还没研究。

今天的重点并不在这些，而是在用antd.pro的时候出现了一个奇怪的问题，如果使用antd.pro快速搭建项目，他会自己支持国际化，而不需要我们去处理国际化，我们只需定义需要的的国际化文件(可能是个json或者js，ts文件)。

antd.pro的完整框架成品是一个管理平台，包含登陆(做一些授权验证等)，主页面，基本上是一个完整的适合快速开发的管理系统。所以我们做管理系统只要在其上根据业务做修改即可。

而我这次做的是一个完全没有登陆模块，也不需要授权验证的单页面功能，比如在一个工具系统中包含很多APP，点击APP之后，跳转到APP的页面，这个页面是没有登陆和授权的，所有的信息接口验证都在服务端做了统一的校验。

那么我碰到的问题就是，“在系统中，表格居然无法国际化”。

什么意思呢，就是在表格中，表格自身的东西无法进行国际化，用户可操作性的部分可以国际化。

上图是一个完整的表格，关于1,2,3,6,7我们都是可以在页面自定义的，也就是可以通过代码intl进行国际化的。

而4,5是表格自己封装自带的，这部分是无法国际化的。

我也很懵逼，为什么会出现这种问题呢？按道理说这个表格应该会支持所有的国际化，这里却表现得不尽如人意。

去官方寻找一下解决办法。

https://procomponents.ant.design/components/table#%E5%9B%BD%E9%99%85%E5%8C%96%E7%A4%BA%E4%BE%8B

官方给出个实例，可以用于表格的单独国际化。

于是乎需要这么做，通过ConfigProvider

      <ConfigProvidervalue={{intl: intlMap[countryIntl],}}><ProTable<TableListItem>headerTitle={intl.formatMessage({ id: 'home.scan.config.title' })}actionRef={actionRef}search={false}rowKey="id"toolBarRender={() => [<Button type="primary" onClick={() => handleModalVisible(true)}><PlusOutlined /> {intl.formatMessage({ id: 'home.scan.button.create' })}</Button>,]}request={(params, sorter, filter) => fetchData()}columns={columns}rowSelection={{onChange: (_, selectedRows) => setSelectedRows(selectedRows),}}dateFormatter="string"/></ConfigProvider>

intlMap的定义如下：

const intlMap = {zhCNIntl,enUSIntl,
};

然后需要在组建中保存表格使用的当前国际化

const [countryIntl, setCountryIntl] = useState('enUSIntl');

antd.pro框架中，官方建议使用的是useIntl来时下国际化。然后他使用SelectLang来实现国际化的切换，由于是封装的，我们没办法在里面去操作什么，但是在使用useIntl的时候，我们可以在组件渲染之后获取到当前的国际化参数，所以需要在组建中这么使用：

先导入

import { useIntl } from 'umi'

在组建中使用

const intl = useIntl();

然后在useeffect中根据当前的国际化切换state中的countryIntl

  useEffect(() => {console.log("effect")intl.locale == "en-US" ? setCountryIntl("enUSIntl") : setCountryIntl("zhCNIntl");},[])

如果碰到我们无从下手的地方(这里指的是官方封装的对于我们不可见的地方），可以使用这种方式进行国际化，封装的里面都是他们定义好的国际化字符串，不需要我们处理。

在这里你并不需要为每个表格都这么设置，你只需要在程序的主入口文件中配置一次就可以了，应该不单单是针对表格，应该是官方封装的所有组件都适用。

antd.pro中表格的国际化处理相关推荐

antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步在dva中主要分为3层 services models components models层用于存放数据 ...
Antd pro中ProFormSelect使用initialValues
最近使用antd pro写项目,其中有一个下拉框回显问题,原本挺简单的代码,但是就是回显对不上. 我给的值是id,想让其显示name,但是显示的确实id.. 正常的解决思路如下: 原代码代码如下: & ...
Antd Pro V4 protable详解（ps:踩坑日记）
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
antd pro mysql_antd pro 路由
概要路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用的全局进行管理. 同时, 它的路由还和菜单和面包屑自动关联上了, 真的是给开发节省了大量的时 ...
极智开发 | nginx 部署 antd pro
欢迎关注我的公众号 [极智视界],获取我的更多笔记分享大家好,我是极智视界,本文介绍一下 nginx 部署 antd pro. Ant Design Pro 是基于 Ant Design ...
antd pro mysql_antd pro table中的文件上传
概述项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro table 的功能很强大, 对于常规的信息展示只需参照示例配置 column 就可以了. ...
antd pro去国际化
在antd pro搭建过程中,想必国际化这个错误提示很头痛吧. 首先网上一大堆文章中都说 config.ts中 layout: {// https://umijs.org/zh-CN/plugins/ ...
antd pro学习入门笔记+todolist实例
AntD Pro零散笔记 antd pro 4.0是一个集成了前后端服务.mock模拟接口.dva容器.typescript.less的一个解决方案,有助于快速的二次开发(不过感觉脚手架真的很大) 文 ...
Antd Pro v4入门
Antd Pro v4入门什么是Ant Design Pro Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础 ...

antd.pro中表格的国际化处理

antd.pro中表格的国际化处理相关推荐

最新文章

热门文章