react 系统多语言，系统国际化

最近面试一家公司，被问到多语言，怎么实现的，我明明是做过，封装过，但是已经被我忘记了，今天记下来，做过的项目比较多，在公司中也比较忙，所以很多东西来不及更新博客，但是又被自己忘记的一干二净了，我这里用到的组件https://arco.design/ 这个组件，设计到内容基本从这个文档中都能找到答案

组件代码 我这里是用react 进行封装的，我这里是进行封装的，在全局页面直接引入使用就行

useLocale.ts

import { useContext } from 'react';
import { GlobalContext } from './context';
import defaultLocale from '../locale';

function useLocale(locale = null) {
    const { lang } = useContext(GlobalContext);

    const defaultI18n = defaultLocale[lang] || {};
    const i18n = locale ? (locale[lang] || {}) : {};

    return (key) => {
        return defaultI18n[key] || i18n[key] || key
    }
}

export default useLocale;

context.ts

import { createContext } from 'react';

export let GlobalContext = createContext<{
  lang?: string;
  setLang?: (value: string) => void;
  theme?: string;
  setTheme?: (value: string) => void;
}>({});

export const registContext = context => {
	GlobalContext = context;
}

arco-lang.ts 这里借助里arco-design 和modo-design 是我们自己的组件库，干掉就行

import zhCN from '@arco-design/web-react/es/locale/zh-CN';
import enUS from '@arco-design/web-react/es/locale/en-US';
import jaJP from '@arco-design/web-react/es/locale/ja-JP';
import koKR from '@arco-design/web-react/es/locale/ko-KR';
import idID from '@arco-design/web-react/es/locale/id-ID';
import thTH from '@arco-design/web-react/es/locale/th-TH';
import zhHK from '@arco-design/web-react/es/locale/zh-HK';
import zhTW from '@arco-design/web-react/es/locale/zh-TW';
import frFR from '@arco-design/web-react/es/locale/fr-FR';
import deDE from '@arco-design/web-react/es/locale/de-DE';
import itIT from '@arco-design/web-react/es/locale/it-IT';
import esES from '@arco-design/web-react/es/locale/es-ES';
import viVN from '@arco-design/web-react/es/locale/vi-VN';
import arEG from '@arco-design/web-react/es/locale/ar-EG';
import modoEnUS from 'modo-design/es/locale/en-US';//干掉
import modoZhCN from 'modo-design//es/locale/zh-CN';//干掉

export default {
    'zh-CN': {...zhCN, ...modoZhCN},
    'en-US': {...enUS, ...modoEnUS},
    'ja-JP': jaJP,
    'ko-KR': koKR,
    'id-ID': idID,
    'th-TH': thTH,
    'zh-HK': zhHK,
    'zh-TW': zhTW,
    'fr-FR': frFR,
    'de-DE': deDE,
    'it-IT': itIT,
    'es-ES': esES,
    'vi-VN': viVN,
    'ar-EG': arEG
}

en-US.ts, 等，其他按照格式写就行，语言文件

export default {
    "查询": "Query",
    "保存": "Save",
    "新建": "Create",
    '清空': 'Clear',
    '预览': 'Preview',
    '编辑': 'Edit',
    '设计': 'Design',
    "删除": "Delete",
    "取消": "Cancel",
    "关闭": "Close",
    "确定": "Confirm",
    "新增": "Insert",
    "导入": "Import",
    "导出": "Export",
    "请输入关键字": "Please enter keywords",
    "加载中": "loading",
    "抱歉，未找到页面": "Sorry, page not found",
    "操作":"Operation"
}

index.ts

import zhCN from './zh-CN';
import enUS from './en-US';
import jaJP from './ja-JP';
import zhTW from './zh-TW';

const i18n = {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP,
    'zh-TW': zhTW
};

export default i18n;

上面是封装完毕了，下面是直接使用，调用案例

locale 下的index.ts，由于有些东西不方便展示，这里折叠了，格式就这么个格式

'''
import useLocale from 'modo-plugin-common/src/utils/useLocale';
import locale from './locale';
//在函数中直接定义然后使用
const t = useLocale(); // 使用全局语言
const userT = useLocale(locale); // 使用组件个性化语言
// 示例：Message.error(${userT('获取集群列表失败')});
//content={t('编辑')} t 是因为我们有些常用的中文封装在一个文件中，减少在项目中的重复写，保证项目常用的翻译一致
'''

上述引入进来，使用