zoukankan      html  css  js  c++  java
  • 在React项目中使用React-intl实现多语言支持,以及对react-init各组件的解读

    React-intl

    原文链接:https://segmentfault.com/a/1190000005824920

    项目地址: https://github.com/yahoo/react-intl

    React-intl是雅虎的语言国际化开源项目FormatJS的一部分,通过其提供的组件和API可以与ReactJS绑定。上面这句话援引了官方文档的说辞,主要表达的是,这是一个很屌的开源项目,有大团队支持,使用量也很大,不会太坑爹,你们放心用。虽然雅虎都快被收购了。

    React-intl提供了两种使用方法,一种是引用React组建,另一种是直接调取API,官方更加推荐在React项目中使用前者,只有在无法使用React组件的地方,才应该调用框架提供的API,事实上,我在项目的过程中真的遇到了无法使用组件的情况,这个我会另外写一篇文章来描述。

    React-intl提供的React组件有如下几种:

    <IntlProvider /> 包裹在需要语言国际化的组建的最外层,为包含在其中的所有组建提供包含id和字符串的键值对。(如: "homepage.title":"Hommily"; )

    日期时间:

    <FormattedDate /> 用于格式化日期,能够将一个时间戳格式化成不同语言中的日期格式。

    传入时间戳作为参数:

    <FormattedDate 
        value={new Date(1459832991883)}
    />  

    输出结果:

    <span>4/5/2016</span>

    <FormattedTime> 用于格式化时间,效果与<FormattedDate />相似。

    传入时间戳作为参数:

    <FormattedTime 
    value={new Date(1459832991883)}
    />

    输出结果:

    <span>1:09 AM</span>
    <FormattedRelative /> 通过这个组件可以显示传入组件的某个时间戳和当前时间的关系,比如 “ 10 minutes ago" 。

    传入时间戳作为参数:

    <FormattedRelative
    value={Date.now()}
    />
    输出结果:

    <span>now</span>

    10秒之后的输出结果:

    <span>10 seconds ago</span>
    1分钟之后的输出结果:

    <span>1 minute ago</span>
    数字量词

    <FormattedNumber /> 这个组件最主要的用途是用来给一串数字标逗号,比如10000这个数字,在中文的语言环境中应该是1,0000,是每隔4位加一个逗号,而在英语的环境中是10,000,每隔3位加一个逗号。

    传入数字作为参数:

    <FormattedNumber
    value={1000}
    />
    输出结果:

    <span>1,000</span>

    <FormattedPlural /> 这个组件可用于格式化量词,在中文的语境中,其实不太会用得到,比如我们说一个鸡腿,那么量词就是‘个’,我们说两个鸡腿,量词还是‘个’,不会发生变化。但是在英文的语言环境中,描述一个苹果的时候,量词是apple,当苹果数量为两个时,就会变成apples,这个组件的作用就在于此。

    传入组件的参数中,value为数量,其他的为不同数量时对应的量词,在下面的例子中,一个的时候量词为message,两个的时候量词为messages。实际上可以传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了所有的情况。

  • 相关阅读:
    begin lydsy 2731
    关于js中this关键字的补充
    js中this关键字测试集锦
    js文件中函数前加分号和感叹号是什么意思?
    好用的wget命令从下载添加环境变量到各参数详解
    一个解析json串并组装echarts的option的函数解析
    oschina代码仓库远程push,pull免密实操总结
    yii 核心类classes.php详解(持续更新中...)
    yii2.0归档安装方法
    配置windows 系统PHP系统环境变量
  • 原文地址:https://www.cnblogs.com/lonelyGentleman/p/6893907.html
Copyright © 2011-2022 走看看