React-intl国际化接入文档

一、使用

1、创建内容

可以在平台lokalise上进行，教程

1. 比如需要新增一个【繁体中文】，在src\i18n\locales创建对应的zh_HK.json文件

   新增内容

"appModule.pageTest.title":"测试页面的标题"

2. 在src\i18n\entries下创建zh_HK.js，引入对应的json文件

import hkMessages from '../locales/`zh_HK.json';
const HkLang = {
  messages: hkMessages,
  locale: 'hk'
};
export default HkLang;

3. 在src\i18n\index.js引入并导出对应[KEY]:[VALUE]

import HkLang from './entries/zh_HK';

const AppLocale = {
    ...
  // key 必须是纯英文字符串
  hk: HkLang, 
};

export default AppLocale;

2、录入系统

1. 登录进入http://i18nui.hairoutech.com/i18ui/entry-management页面

2. 选中对应的系统，如IWMS对应的智能仓储管理系统

3. 填入词条编码【appModule.pageTest.title】

4. 【语种的值】，就是切换国际化语言后展示的对应的【实际内容】

5. 新增对应的【HK】语种以及对应的appModule.pageTest.title内容。

3、使用IntlMessages

1. 引入国际化组件

import IntlMessages from 'util/IntlMessages';

2. 使用组件，展示对应国际化内容

const id = "appModule.pageTest.title";

<Title title={<IntlMessages id={id} />} />

3. 测试

   在页面切换国际化语言。

二、注入原理

1、创建上下文

AppContext

目录：src@jumbo\components\contextProvider\AppContextProvider\index.js

创建顶层上下文AppContext，所有子组件可以订阅各种事件以及获取对应的值。

包括当前的locale。

PS：init国际化数据

useInitLocales()处理初始数据

1. Jumbo项目本身的国际化i18.xxx.json是内置的，现在接入国际化平台之后，对应数据除了本地需要有一份对应的代码，还需要通过请求。

2. 所以在AppContextProvider\index.js内做了对应数据初始的更新处理，通过封装的useInitLocales返回对应更新后的值，然后update locale字段。

2、注入

AppContext-->App

目录：src\App.js

1. 创建好了上下文AppContext，注入到顶层APP组件中。

2. 避免【登录】数据或者【刷新页面】后无法获取新的JSON数据，会先清空，然后在useInitLocales读取不到本地存储的数据时，会再次请求国际化数据。

3、国际化key

i18n\xxx\xxx.json

目录：src\i18n\index.js

1. 所有的国际化内容都需在本地有一份。形式就是对应json文件的[key]:value

2. 写完对应的json后，最终会被读取到AppLocale对象中。

4、订阅

IntlProvider->AppWrapper->IntlMessages

src@jumbo\components\AppWrapper\index.js

1. 组件IntlProvider会自动订阅locale字段的更新【切换】

2. 组件内的children就可以实时拿到对应的键，然后读取对应的messages字段

3. messages就是当前语言对应的JSON

5、读取value

value = messages[id]

src\util\IntlMessages.js

1. 拿到JSON

2. 在IntlMessages组件做对应展示处理