如何在React中实现多国语言,本人通过学习,得到实现,整理如下:
①安装React Intl
在需要多国语言的项目中:
运行:npm install react-intl --save
②建立需翻译国家语言的 js文件
例如:
en_US.js
zh_CN.js
在这些JS文件中使用 json 键/值 的形式
eg:
③在整个项目的入口函数处引入 react-intl:
addLocaleData:引入本地的 localedata
IntlProvider:包裹需要翻译的组件,用来传递给子类语言信息
FormattedMessage :包裹需要实现多国语言的文字
载入本地 localedata 语言数据:
这个是react-intl内置的语言数据
需要引入与navigator.languages[0]所对应的语言;如果没有引入对应的语言,会使用默认的“en”;不然会导致 FormattedMessage 的映射不成功
载入之前建立的需翻译国家语言的 js文件:
④定义 messages
messages是render()时IntlProvider组件所传的props,属性名固定
messages是render()时IntlProvider组件所传的props,属性名固定
messages返回值为映射表,与浏览器语言对应:
附上浏览器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);
//载入多个;
⑥IntlProvider包裹需要翻译的组件
locale:传递当前的语言是什么语言
messages:传递多国语言JS 内的翻译语句
⑦在上述需要翻译的App组件中
引入 react-intl 内的FormattedMessage:
以id属性的值为索引——索引到自定义的映射表:
id内的值即为之前建立的多国语言的js文件中对应的前面的 “键值”
defaultMessage:默认显示的语句