Antd----国际化（i18n）

最新推荐文章于 2024-09-17 14:59:39 发布

朝朝忆萍

最新推荐文章于 2024-09-17 14:59:39 发布

阅读量1.2k

点赞数

分类专栏： React单页面应用文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/jddfj/article/details/129280267

版权

React单页面应用专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在应用中将antd组件设置为中文，通过在app.jsx中引入ConfigProvider并设置locale属性为antd/locale/zh_CN。此外，为了处理时间日期的国际化，还引入了dayjs库，并使用dayjs/locale/zh-cn将语言设置为中文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd默认是英文的所以需要做一个全局配置，将组件改为中文（使用响应式数据可以一键切换，这里是直接固定为中文）

在跟组件app.jsx中药引入ConfigProvider组件将跟组件包裹（主题的设置就是用这个组件）

ConfigProvider有一个locale属性，是antd组件的语言

import zhCN from 'antd/locale/zh_CN';

...

export default function App() {
  return (
    <ConfigProvider locale={zhCN}>
        {/*路由模块*/}
      <BrowserRouter>
        <Router></Router>
      </BrowserRouter>
    </ConfigProvider>
  )
}

上面实现了antd组件的中文，因为组件中有时间日期的表单，所以还需要下载dayjs插件来实现组件国际化

pnpm i dayjs

然后要在根组件添加下面的配置项


import dayjs from 'dayjs';
//引入语言
import 'dayjs/locale/zh-cn';
//这句就是将语言转换成中文
dayjs.locale('zh-cn');