【坑】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>
  )
}
  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Ant Design 是一个基于 React 的 UI 组件库,提供了丰富的组件和样式,适用于各种类型的 Web 应用程序。Ant Design 也提供了国际化的支持,方便开发者在不同的地区和语言环境下使用。 在 Ant Design 中使用 TypeScript 进行国际化的步骤如下: 1. 安装依赖 需要安装 `@ant-design/icons`, `@ant-design/pro-layout`, `antd`, `umi-plugin-locale` 和 `umi-plugin-react` 等依赖,可以使用以下命令安装: ``` yarn add @ant-design/icons @ant-design/pro-layout antd umi-plugin-locale umi-plugin-react --dev ``` 2. 配置国际化 在 `config/config.ts` 中配置国际化,包括语言国际化资源文件等信息: ``` import { IConfig } from 'umi-types'; const config: IConfig = { // ... locale: { default: 'zh-CN', antd: true, title: true, baseNavigator: true, baseSeparator: '-', }, // ... }; export default config; ``` 3. 创建国际化资源文件 在 `src/locales` 目录下创建国际化资源文件,例如 `zh-CN.ts` 和 `en-US.ts`,分别存放中文和英文的翻译信息: ``` export default { 'app.title': 'Ant Design Pro', 'app.menu.home': '首页', 'app.menu.dashboard': 'Dashboard', // ... }; ``` 4. 在组件中使用国际化 在组件中使用 `umi-plugin-locale` 提供的 `formatMessage` 函数获取国际化资源信息,并将其展示在页面上: ``` import React from 'react'; import { formatMessage } from 'umi-plugin-locale'; const MyComponent: React.FC = () => { return ( <div> <h1>{formatMessage({ id: 'app.title' })}</h1> <nav> <ul> <li> <a href="/">{formatMessage({ id: 'app.menu.home' })}</a> </li> <li> <a href="/dashboard">{formatMessage({ id: 'app.menu.dashboard' })}</a> </li> </ul> </nav> </div> ); }; export default MyComponent; ``` 以上就是在 Ant Design 中使用 TypeScript 进行国际化的基本步骤。需要注意的是,Ant Design 提供了很多组件和功能,开发者需要根据自己的需求进行配置和使用。同时,国际化的实现也需要根据实际情况进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值