因项目需要,需要根据不同地区当前用户选择的语言, 加载不同的语言文件从而实现国际化。
关于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!!!!
网友评论