ant 支持的语言

地址：https://ant.design/docs/react/i18n-cn

dayjs支持的语言

地址：https://github.com/iamkun/dayjs/tree/dev/src/locale

ant，dayjs和后端语言对照表

如何在react，ant项目中使用语言切换

首先，定义 util.ts 用来将浏览器语言代码转为后端语言代码 src\langs\util.ts

export interface LangType {
  /**
   * 语言名称
   */
  name: string;
  /**
   * 浏览器语言
   */
  browser: string;
  /**
   * Ant 支持的语言
   */
  ant: string;
  /**
   * DayJS 支持的语言
   */
  dayjs: string;
  /**
   * 后端语言
   */
  backend: string;
}

/**
 * 支持的语言列表，可以从后端获取
 *
 */
const support = new Map<string, LangType>([
  /**
   * 英语
   */
  ['en-GB', { name: '英语', browser: 'en-GB', ant: 'enGB', dayjs: 'en-gb', backend: 'en-GB' }],
  /**
   * 英语（美式）
   */
  ['en', { name: '英语（美式）', browser: 'en', ant: 'enUS', dayjs: 'en', backend: 'en' }],
  /**
   * 中文
   */
  ['zh', { name: '中文', browser: 'zh', ant: 'zhCN', dayjs: 'zh-cn', backend: 'zh' }],
  /**
   * 简体中文
   */
  ['zh-CN', { name: '简体中文', browser: 'zh-CN', ant: 'zhCN', dayjs: 'zh-cn', backend: 'zh' }],
  /**
   * 繁体中文（中国台湾）
   */
  ['zh-TW', { name: '繁体中文（中国台湾）', browser: 'zh-TW', ant: 'zhTW', dayjs: 'zh-tw', backend: 'zh-TW' }],
  /**
   * 泰语
   */
  ['th', { name: '泰语', browser: 'th', ant: 'thTH', dayjs: 'th', backend: 'th' }],
]);

/**
 * 将浏览器语言代码进行转换
 * @param code
 */
export function getLangType(code: string): LangType {
  if (code == undefined || code == null || code == '') {
    return defaultLangType;
  }
  // 转换几个特殊编码
  switch (code) {
    case 'en-GB-oxendict':
      code = 'en-GB';
      break;
    case 'fr-FR':
      code = 'fr';
      break;
    case 'pt-PT':
      code = 'pt';
      break;
    case 'zh-CN':
      code = 'zh';
      break;
    case 'uz-Latn':
      code = 'uz';
      break;
    default:
      break;
  }
  // 返回转换后的语言
  if (support.has(code)) {
    return support.get(code)!;
  }
  code = code.split('-')[0];
  return support.has(code) ? support.get(code)! : defaultLangType;
}

/**
 * 默认语言
 */
export const defaultLangType = support.get('en')!;

其中支持的语言列表变量 support 可以通过加载js文件从后端获取，比如

https://demo.com/lang-support.js

可通过下面代码声明变量，以免报错

// 声明全局类型（防止TS报错）
declare global {
  interface Window {
    languageSupport: Map<string, LangConvert>;
  }
}
// 使用变量
const support = window.languageSupport;

然后，在 i18n.ts 文件中使用 getLangType函数，src\langs\i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

import { setLang } from '@/stores/lang/lang-store';
import { getLangType } from './util';

i18n
  .use(Backend) // 启用从后端加载翻译文件
  .use(LanguageDetector) // 启用浏览器语言检测
  .use(initReactI18next) // 绑定 React
  .init({
    fallbackLng: 'en-GB', // 默认语言，初次加载时，首先会加载默认语言，然后加载当前语言，也就是说初次加载时会加载两种语言
    load: 'currentOnly', // 仅加载当前语言
    interpolation: {
      escapeValue: false, // React 已经处理了 XSS 防护
    },
    backend: {
      loadPath: 'http://demo.com/lang.php?code={{lng}}', // 从后端加载翻译文件的路径
    },
    detection: {
      // 自定义 localStorage 的 key，这里面存的是当前语言类型，不是语言翻译内容
      lookupLocalStorage: 'my_custom_lng_key',
      // 自定义 cookie 的 key，这里面存的是当前语言类型，不是语言翻译内容
      lookupCookie: 'my_custom_lng_cookie_key',
      // 语言检测的选项，当前语言会按照顺序依次从以下选择中查询当前语言
      order: ['localStorage', 'cookie', 'navigator'],
      // 缓存检测到的语言
      caches: ['localStorage', 'cookie'],
      // 语言代码转换，可以将当前语言代码进行转换，比如将 en 转换为 en-GB
      convertDetectedLanguage: (code) => {
        return getLangType(code).browser;
      },
    },
  });

// 大多数场景不建议将i18n的语言保存到状态管理，因为 i18n 自身已有管理状态，避免重复，微前端架构可能需要保存到状态管理，也看具体情况
i18n.on('initialized', () => {
  setLang(getLangType(i18n.language));
});

export default i18n;

在状态管理 lang-store.ts 里保存文件，并在语言切换的方法里处理其它逻辑，比如字典的重新获取

import i18n from '@/langs/i18n';
import { LangType, defaultLangType, getLangType } from '@/langs/util';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';


// define the initial state
const init: LangType = defaultLangType;

// 存储store的key
const storeKey = 'store-lang';

// create your store
const useLangStore = create<LangType>()(
  immer(
    persist(
      () => ({
        ...init,
      }),
      {
        // name of the item in the storage (must be unique)
        name: storeKey,
        // (optional) by default, 'localStorage' is used
        storage: createJSONStorage(() => localStorage),
      }
    )
  )
);

export default useLangStore;

// 设置语言
export const setLang = (state: LangType) => {
  useLangStore.setState(state);
  // 这里可以处理其它逻辑，比如切换语言后，需要重新获取字典数据，需要修改i18n缓存在浏览器的语言代码等...
  i18n.changeLanguage(state.browser)
};

在项目中使用 ant 和 dayjs，并进行语言切换

import { ConfigProvider, Calendar, Radio, RadioChangeEvent } from 'antd';

import { Locale } from 'antd/lib/locale';
import { getLangType } from './langs/util';

import useLangStore, { setLang } from '@/stores/lang/lang-store';

import dayjs from 'dayjs';

// 引入 Ant Design 中文语言包，这里不一一引入了，支持哪些语言，引用哪些语言即可
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import enGB from 'antd/locale/en_GB';
import zhTW from 'antd/locale/zh_TW';
import thTH from 'antd/locale/th_TH';

// 引入 dayjs 的语言包，这里不一一引入了，支持哪些语言，按需引入即可
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/zh-tw';
import 'dayjs/locale/th';

// 方便演示，简单列出几种语言
const antLangMap = new Map<string, Locale>([
  ['enGB', enGB],
  ['enUS', enUS],
  ['zhCN', zhCN],
  ['zhTW', zhTW],
  ['thTH', thTH],
]);

function App() {
  const lang = useLangStore((state) => state);

  const onChange = (e: RadioChangeEvent) => {
    // 这里应该单独抽离出一个方法，在 i18n initialized 事件时同步调用该方法
    const v = getLangType(e.target.value);
    setLang(v);
    dayjs.locale(v.dayjs);
  };

  console.log(lang);

  return (
    <>
      <ConfigProvider locale={antLangMap.get(lang.ant)}>
        <Radio.Group
          onChange={onChange}
          value={lang.backend}
          options={[
            { value: 'en', label: '英语（美式）' },
            { value: 'zh', label: '中文' },
            { value: 'zh-TW', label: '繁体中文（中国台湾）' },
            { value: 'th', label: '泰语' },
          ]}
        />
        <div
          style={{
            width: '500px',
            margin: '50px auto',
            padding: '10px',
            border: '1px solid #eee',
          }}
        >
          <Calendar></Calendar>
        </div>
      </ConfigProvider>
    </>
  );
}

export default App;