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

最新推荐文章于 2025-09-26 00:30:09 发布

原创最新推荐文章于 2025-09-26 00:30:09 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#antd.pro #表格国际化

React 专栏收录该内容

36 篇文章

订阅专栏

本文介绍Antd Pro V5版本的更新亮点，包括回归React Hooks和改进的请求方式。重点解决在使用Antd Pro搭建项目时，表格国际化功能的缺失问题，通过ConfigProvider和useIntl组件实现表格的独立国际化。

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

      <ConfigProvider
        value={{
          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");
  },[])

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

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