react-intl-universal使用時英文變量不會按照模闆展示

在進行網站中英文開發的時候，引入了阿裡團隊的react-intl-universal，但是在處理英文時經常會有英文需要複數展示的情況，還有單複數的動詞等，需要根據不同變量值來确定。

首先需要引用中英文庫，可以從通過接口去資料庫取，也可以自己直接定義：

import EN from './locales/us-EN.json'

import CH from './locales/zh-CN.json'

const locales = {

    "en": EN,

    "zh": CH

};
           

之後先對該元件進行初始化，初始化完畢再渲染頁面。因為我需要前端記住選擇的模式，是以用了localStorage保證在關閉頁面之後還記住該值。

intl.init({

    currentLocale: localStorage.getItem('lang_type')||'zh',

    locales

}).then(() => {

    this.setState({initDone: true});

});
           

其中要适配的兩條資訊是：

zh-CN.json

"PASSWORDVALID": "密碼還有{expireNotice}天到期，請聯系管理者及時修改"
           

us-EN.json

"PASSWORDVALID": "Password has {expireNotice, plural, =1{1 day} other{# days}}, to expire, please contact the administrator to modify in a timely."
           

一開始設定的locales是這樣的：

const locales = {

    "en_US": EN,

    "zh_CN": CH,

};
           

初始化的時候：

currentLocale: localStorage.getItem('lang_type')||' en_US '
           

此時利用

intl.get("PASSWORDVALID ", { expireNotice: 12 })
           

英文版本展示的結果為：

中文展示結果為：

顯然是沒有識别出格式，之後我将currentLocale初始化的英文模式設定為"en"，即一開始的寫法，展示出來的結果就是正确的，可見currentLocale對設定的模式有特定的值，是以在locales設定時key值可以按照特定值en和zh設定，雖然中文版不影響。

原因：locales 的參數必須遵從 BCP 47 規範，locales 标記必須是"en"、 "en-US" 、 "zh-Hans-CN" 等，這個标記包含了語言、地區和國家。完整的清單可以檢視 IANA language subtag registry。

參考來自：

1. http://www.sohu.com/a/165936349_463970

歡迎關注我的公衆号，兩隻摩羯程式員的日常更新~~