react-intl多语言中

2018-07-31  本文已影响0人  Arya06

因项目需要，需要根据不同地区当前用户选择的语言， 加载不同的语言文件从而实现国际化。

关于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!!!!