React Intl多国语言运行详解

如何在React中实现多国语言，本人通过学习，得到实现，整理如下：

①安装React Intl
在需要多国语言的项目中:
运行：npm install react-intl --save

②建立需翻译国家语言的 js文件

例如：

en_US.js

zh_CN.js

在这些JS文件中使用 json 键/值 的形式

eg：

const en_US = {

hello: "Hello,World!",

superHello: "Hello,{ someone }!"

}

export default en_US;

③在整个项目的入口函数处引入 react-intl：

import { addLocaleData, IntlProvider, FormattedMessage} from 'react-intl';

addLocaleData：引入本地的 localedata 
IntlProvider：包裹需要翻译的组件，用来传递给子类语言信息
FormattedMessage ：包裹需要实现多国语言的文字

载入本地 localedata 语言数据：

import zh from 'react-intl/locale-data/zh';

import en from 'react-intl/locale-data/en';

这个是react-intl内置的语言数据
需要引入与navigator.languages[0]所对应的语言；如果没有引入对应的语言，会使用默认的“en”；不然会导致 FormattedMessage 的映射不成功

载入之前建立的需翻译国家语言的 js文件：

import zh_CN from './locale/zh_CN';

import en_US from './locale/en_US';

④定义 messages 

messages是render()时IntlProvider组件所传的props，属性名固定

let messages = {};

messages是render()时IntlProvider组件所传的props，属性名固定

messages返回值为映射表，与浏览器语言对应：

messages[ "en"] = en_US;

messages[ "zh-CN"] = zh_CN;

附上浏览器languages大全：

"af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", "ar-MA", "ar-TN", "ar-OM", "ar-YE", "ar-SY", "ar-JO", "ar-LB", "ar-KW", "ar-AE", "ar-BH", "ar-QA", "eu", "bg", "be", "ca", "zh-TW", "zh-CN", "zh-HK", "zh-SG", "hr", "cs", "da", "nl", "nl-BE", "en", "en-US", "en-EG", "en-AU", "en-GB", "en-CA", "en-NZ", "en-IE", "en-ZA", "en-JM", "en-BZ", "en-TT", "et", "fo", "fa", "fi", "fr", "fr-BE", "fr-CA", "fr-CH", "fr-LU","gd", "gd-IE", "de", "de-CH", "de-AT", "de-LU", "de-LI", "el", "he", "hi", "hu","is", "id", "it", "it-CH", "ja", "ko", "lv", "lt", "mk", "mt", "no", "pl", "pt-BR", "pt", "rm", "ro", "ro-MO", "ru", "ru-MI", "sz", "sr", "sk", "sl", "sb","es", "es-AR", "es-GT", "es-CR", "es-PA", "es-DO", "es-MX", "es-VE", "es-CO", "es-PE", "es-EC", "es-CL", "es-UY", "es-PY", "es-BO", "es-SV", "es-HN", "es-NI","es-PR", "sx", "sv", "sv-FI", "th", "ts", "tn", "tr", "uk", "ur", "ve", "vi", "xh","ji", "zu"

⑤载入语言数据

//载入一个

addLocaleData(zh);

//载入多个；

addLocaleData([... zh,... en]);

⑥IntlProvider包裹需要翻译的组件

render(){

return(

< IntlProvider locale= {this. state. langFlag } messages= { messages[ this. state. langFlag] } >

< App lang= {this. handleLangFlag. bind( this) } originalLang= { currentLang } />

</ IntlProvider >

)

}

locale：传递当前的语言是什么语言

messages：传递多国语言JS 内的翻译语句

要实现多国语言，需要修改的就是IntlProvider 包裹的组件内的 locale和messages

⑦在上述需要翻译的App组件中

引入 react-intl 内的FormattedMessage：

import { FormattedMessage} from 'react-intl';

以id属性的值为索引——索引到自定义的映射表：

< FormattedMessage id= "hello" defaultMessage= "React Intl Translations Example" />

id内的值即为之前建立的多国语言的js文件中对应的前面的 “键值”

defaultMessage：默认显示的语句