美文网首页
react-intl多语言中

react-intl多语言中

作者: Arya06 | 来源:发表于2018-07-31 22:58 被阅读0次

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

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

相关文章

网友评论

      本文标题:react-intl多语言中

      本文链接:https://www.haomeiwen.com/subject/gyskvftx.html