美文网首页
react + antd 默认中文展示

react + antd 默认中文展示

作者: Petricor | 来源:发表于2023-04-12 10:28 被阅读0次

前言

  • 最近用react + antd 写后台管理系统的项目,但是在官网组件上是 展示的是中文,但是引用过来之后展示的默认样式是英文样式
    问题展示

解决方案

方案一(单一处理)

在分页组件(或者其他组件,例如日期组件)外套上一层:

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';

<ConfigProvider locale={zhCN}>
  <Pagination/>
</ConfigProvider>

这样可以解决,但是不够完美,因为各个组件可能都需要这样,于是有了方案二

方案二(统一处理)
  • 如果你想全局生效,如果是React项目,就可以在公共目录下的模板页面,全局进行设置即可,如果是脚手架生成的react项目可以在main.jsx 或者 app.jsx 下进行处理
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./router/index";
import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale/zh_CN";
function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <BrowserRouter>
        <AppRouter />
      </BrowserRouter>
    </ConfigProvider>
  );
}
export default App;
处理后

结语

  • 正是因为默认语言的可配置性,可以将系统设置成多语言系统
  • 希望各位朋友能精通React ,这里有react 的 demo ,望多指教 。
    码云地址:react-question-v6
    码云地址 :react-question-vite

相关文章

网友评论

      本文标题:react + antd 默认中文展示

      本文链接:https://www.haomeiwen.com/subject/bzrnddtx.html