react-intl多语言中组件用法

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

关于react-intl中的组件用法:
首先创建需要翻译的国家语言的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}"
}

然后在需要翻译的组件中引入

import {FormattedMessage} from 'react-intl';

基础用法:
以id属性的值为索引——索引到自定义的映射表:


其中defaultMessage为id对应的属性值找不到时默认显示的语句。

动态传值:

{name}}} />

在定义i18n.name的模板里用到了{name},代表可以动态传值,这样可以通过中的 values 属性传一个JSON对象来动态显示我们的内容了。这里要注意是values而不是value!!!!

你可能感兴趣的:(react-intl多语言中组件用法)