一:国际化的实现原理
准备自己翻译好的语言包例如zh.json、en.json(结构为{ ‘hello’: ‘你好,世界’}),用一个变量存储当前选择的语言locale,根据locale选择应用哪个json, 再根据id ‘hello’,替换为对应的message ‘你好,世界’
二:用react-intl实现国际化
✨步骤概要
- 安装 react-intl
- 载入react-intl的语言包
- 用< IntlProvider >组件包裹业务根组件
- 准备自己翻译的语言包(zh.json / en.json)
- 全局配置当前的语言,和相对应的语言包
- 子组件的国际化
- 非组件的国际化
- antd组件国际化
- 添加切换语言按钮
- 报错catch
- node遍历messages.tsx文件生成zh.json工具
✨步骤分解
( 以下示例代码详情见项目
common-base:http://gitlab.sftcwl.com/tblh-fe/common-base
apodidae: http://gitlab.sftcwl.com/oms-tms/apodidae )
- 安装 react-intl
npm install react-intl --save
- 载入react-intl的语言包
// common-base/utils/i18n.tsx
// React Intl 依赖这些数据来支持单复数和相对时间格式化的功能
import {
addLocaleData } from 'react-intl';
import * as enLocaleData from 'react-intl/locale-data/en';
import * as zhLocaleData from 'react-intl/locale-data/zh';
addLocaleData(enLocaleData);
addLocaleData(zhLocaleData);
- 用< IntlProvider >组件包裹业务根组件
// 用<IntlProvider>包裹根组件,这个组件树之后就会在配置的i18n上下文中了
// common-base/containers/LanguageProvider、apodidae/src/index-dev.tsx
import {
IntlProvider } from 'react-intl';
<IntlProvider
locale = {
locale }
key = {
locale }
messages = {
msg }
defaultLocale = {
'en' }
>
<Main /> // 业务根组件
</IntlProvider>
抛错注意:若locale=en,找不到对应的英文翻译包en.json时,当defalutLocale与locale相同,并且编写了defaultMessage, 则使用defaultMessage的翻译;当defalutLocale与locale不同,即使编写了defaultMessage,也会抛错。
- 准备自己翻译的语言包(zh.json / en.json)
// src/translations/zh.json
{
"project.homePage": "首页",
"project.system": "系统管理",
}
- 全局配置当前的语言,和自己翻译的语言包
// 引入语言包
// common-base/utils/i18n.tsx
const zhTranslationMessages = require('../../src/translations/zh.json');
const enTranslationMessages = require('../../src/translations/en.json');
export const translationMessages: MessagesMap =