Day97/100 React+Ant Design Pro多语言(中英文)切换Demo

(一)需求

项目需要中英文切换。需要将项目做中文/英文切换。来满足英语语言的展示和访问需求。

(二)分析

1、项目至少需要支持中英文切换。

2、需要切换的内容分为:

  • 组件的中英文切换;
  • 菜单、标题、表单等其他内容的中英文切换。

(三)实现

1、Ant Design Pro 组件库

官方支持了配置,链接如下:
https://ant.design/components...

2、菜单、标题等其他内容

需要填写中英文两种文字的对照版本——两个文件分别对应文本不同的翻译内容,切换语言后,做不同的展示。

(四)代码

1、在src文件夹下新建了lang文件夹

有三个子文件

// cn.ts
export default {
  box: '框',
  shortkey: '快捷键',
  batchEditAttr: '批量修改属性',
  selCheck: '抽检',
  save: '保存',
  submit: '提交',
};
// en.ts
export default {
  box: 'box',
  shortkey: 'shortkey',
  batchEditAttr: 'batchEditAttr',
  selCheck: 'selCheck',
  save: 'save',
  submit: 'submit',
};
// index.ts
import cn from '@/lang/cn';
import en from '@/lang/en';

export default {
  'zh-cn': cn,
  en,
};

2、src 文件新建了common文件夹

包含了处理多语言的公共方法

// antdLocale.ts
import enUS from 'antd/lib/locale/en_US';
import zhCN from 'antd/lib/locale/zh_CN';
import lang from '@/lang/index';
import moment from 'moment';
export const localeMap = {
  en: enUS,
  'zh-cn': zhCN,
};

export const utransLang = localStorage.utransLang
  ? localStorage.utransLang
  : 'zh-cn';
export const setLocaleLang = (item) => {
  localStorage.utransLang = item;
};
export const getLocalLang = () => {
  const tmp = localStorage.utransLang ? localStorage.utransLang : 'zh-cn';
  window.lang = lang[tmp];
  // console.log(lang);
  // debugger;
};
export const getAntdLang = () => {
  getLocalLang();
  moment.locale(utransLang);
  return localeMap[utransLang];
};

3、首页Demo

// index.tsx
import styles from './index.less';
import React, { useState } from 'react';
import {
  ConfigProvider,
  Button,
  DatePicker,
  Space,
  version,
  Radio,
  Col,
  Row,
} from 'antd';
import type { RadioChangeEvent } from 'antd';
import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/zh_CN';
import {
  getAntdLang,
  getLocalLang,
  utransLang,
  setLocaleLang,
} from '@/common/antdLocale';

export default function IndexPage() {
  if (!window.lang) {
    getLocalLang();
  }
  console.log(window.lang);
  // debugger
  const [locale, setLocal] = useState(utransLang);

  const changeLocale = (e: RadioChangeEvent) => {
    console.log('changeLocale:', locale);
    const localeValue = e.target.value;
    // debugger
    setLocaleLang(localeValue.locale);
    getLocalLang();
    // const href = window.location.href
    // location.href = location.href
    setLocal(localeValue);
  };
  const save = () => {
    console.log('click');
  };
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <div className="App">
        <h1>antd version: {version}</h1>
        <Row>
          <Col span={24}>
            <Radio.Group value={locale} onChange={changeLocale}>
              <Radio.Button key="en" value={enUS}>
                English
              </Radio.Button>
              <Radio.Button key="cn" value={zhCN}>
                中文
              </Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <ConfigProvider locale={locale}>
              <Space
                key={
                  locale
                    ? locale.locale
                    : 'en' /* Have to refresh for production environment */
                }
              >
                <DatePicker />
                <Button type="primary" onClick={() => save()}>
                  {lang.submit}
                </Button>
              </Space>
            </ConfigProvider>
          </Col>
        </Row>
      </div>
    </div>
  );
}

喜欢解决问题,每日复盘 600 天以上。

24 声望
9 粉丝
0 条评论
推荐阅读
Day101/200 Mac微信小程序引入@vant/weapp样式不生效问题
修改 app.json将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

SnowWolfArden阅读 299

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

喜欢解决问题,每日复盘 600 天以上。

24 声望
9 粉丝
宣传栏