在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 已经涵盖了所有的情况。