react项目国际化

一：国际化的实现原理

准备自己翻译好的语言包例如zh.json、en.json（结构为{ ‘hello’: ‘你好，世界’}），用一个变量存储当前选择的语言locale，根据locale选择应用哪个json, 再根据id ‘hello’，替换为对应的message ‘你好，世界’

二：用react-intl实现国际化

✨步骤概要

1. 安装 react-intl
2. 载入react-intl的语言包
3. 用< IntlProvider >组件包裹业务根组件
4. 准备自己翻译的语言包（zh.json / en.json）
5. 全局配置当前的语言，和相对应的语言包
6. 子组件的国际化
7. 非组件的国际化
8. antd组件国际化
9. 添加切换语言按钮
10. 报错catch
11. node遍历messages.tsx文件生成zh.json工具

✨步骤分解

( 以下示例代码详情见项目
common-base：http://gitlab.sftcwl.com/tblh-fe/common-base
apodidae: http://gitlab.sftcwl.com/oms-tms/apodidae )

1. 安装 react-intl

 npm install react-intl --save 

2. 载入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);

3. 用< 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，也会抛错。

4. 准备自己翻译的语言包（zh.json / en.json）

// src/translations/zh.json
{
   
  "project.homePage": "首页",
  "project.system": "系统管理",
}

5. 全局配置当前的语言，和自己翻译的语言包

// 引入语言包
// common-base/utils/i18n.tsx
const zhTranslationMessages = require('../../src/translations/zh.json');
const enTranslationMessages = require('../../src/translations/en.json');
export const translationMessages: MessagesMap =