因項目需要,需要根據不同地區當前用戶選擇的語言, 加載不同的語言文件從而實現國際化。
關于react-intl中的<FormattedMessage />組件用法:
首先創建需要翻譯的國家語言的js或者json文件,比如:
en_CN.json:
{
"i18n.hello": "Hello, this is i18n",
"i18n.name": "my name is {name}"
}
zh_CN.json:
{
"i18n.hello": "你好,這是i18n",
"i18n.name": "我的名字是 {name}"
}
然后在需要翻譯的組件中引入<FormattedMessage />
import {FormattedMessage} from 'react-intl';
基礎用法:
以id屬性的值為索引——索引到自定義的映射表:
<FormattedMessage id="i18n.hello" defaultMessage="Hello, this is i18n"/>
其中defaultMessage為id對應的屬性值找不到時默認顯示的語句。
動態傳值:
<FormattedMessage id={i18n.name} values={{name: <b>{name}</b>}} />
在定義i18n.name的模板里用到了{name},代表可以動態傳值,這樣可以通過<FormattedMessage />中的 values 屬性傳一個JSON對象來動態顯示我們的內容了。這里要注意是values而不是value!!!!