美文网首页
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