react-intl国际化在项目中的使用

前言

使用成熟的第三方库的国际化，可以直接使用封装好的方法，这个国际化的原理其实是使用了react 的第三方库react-intl ，感觉主要比较好的就是使用其中的模版，它的本质还是通过了Provider的形式

第一步新建文件夹，计划把所有的国际化相关的代码统统放到 src/locale 中以下是目录结构

src-local-languages (所有的翻译文件)-Provider (国际化包裹组件，其中调用国际化接口并合并最后注入)-index.ts(到处一些公共的语言相关的变量和方法)

1、项目入口 js文件

从入口 js 文件开始我们的工作，可以看到只使用了 IntlProvider 组件，并传入了当前的模块名字，在组件中通过模块名去请求后端的国际化内容

// 以下是 vite 的入口文件 main.tsx
import ReactDOM from 'react-dom/client'
import { Suspense } from 'react'
import 'amfe-flexible'import App from './App'// 国际的 Provider (包含 react-intl antd)
import IntlProvider from '@/locale/Provider'ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<IntlProvider moduleCodes='baseline'><Suspense><App /></Suspense></IntlProvider>
)

2、locale/index.ts文件

1. 定义了当前的语言

2. 定义了当前的 languages 翻译内容

3. 导出了非组件中使用intl的方法（简写了一些代码，其他组件中都使用了hooks的国际化写法，这里导出是为了方便组件外面使用）

import { createIntl, createIntlCache } from "react-intl";import en_us from "./languages/en-us";
import zh_cn from "./languages/zh-cn";
import zh_tw from "./languages/zh-tw";// 所有的语言map
let languages = {"en-us": en_us,"zh-cn": zh_cn,"zh-tw": zh_tw,
};// 当前的语言
const lang = localStorage.getItem("language") || "zh-cn";// 非组件中使用intl
const intl = createIntl({locale: localStorage.getItem("language") || "zh-cn",messages: languages[lang],},createIntlCache()
);// 简写 intl.formatMessage（使得业务中少些代码）
const i18n = (id: string,defaultMessage?: string,description?: string | object
) => {return intl.formatMessage({ id, defaultMessage, description });
};export { languages, lang, intl, i18n };

3、locale/Provider组件

入口的使用的 IntlProvider 定义如下，可以看到该组件做了以下操作

1. 引入locale/index.ts文件中的 当前语言、所有的语言翻译

2. 组件挂载后立马通过 moduleCodes 获取后端国际化内容然后合并本地的国际化内容（具体每个项目不同），成功合并后渲染所有的子页面 {init && children}

3. 处理UI库的国际化（这里是antd）

import { useEffect, useState } from 'react';
import { ConfigProvider } from 'antd'
import { IntlProvider } from 'react-intl'
import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';import { getIntl } from '@/api/user'
import { languages, lang } from '../index'dayjs.locale(lang )export default function Index(props: {children?: any,moduleCodes: string | Array<string>,
}) {let { children, moduleCodes } = propsconst [init, setInit] = useState(false)const [intl, setInel] = useState({})useEffect(() => {initData()}, [])const initData = async () => {// 接口请求获取国际化，并合并本地默认值let res = await getIntl(moduleCodes)let map = {}res.list.forEach((module: { [key: string]: string }) => {Object.keys(module).forEach(key => {Object.assign(map, module[key])})})setInel({ ...languages[lang], ...map })setInit(true)}return (<IntlProvider defaultLocale="zh-cn" locale={lang} messages={intl}><ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>{init && children}</ConfigProvider></IntlProvider>)
}

3、locale/languages

目前有两种语言文件 en-us.ts zh-cn.ts，导出一个键值对的对象

// en-us.ts
export default {"baseline.common.index": "No.",
};

//zh-cn.ts
export default {"baseline.common.index": "序号",
};

4、国际化的使用

这是函数组的使用，类组件的使用可以使用上面locale/index.ts导出的的 intl，具体的使用可以点进去看 react-intl 的定义

import { useIntl } from 'react-intl';function Component(){const intl = useIntl();useEffect(() => {// 测试intl.formatMessage({ id: 'baseline.common.index'});}, [])
}