react-intl 是用来支持react框架实现国语言的有效工具，但是一般在具体的项目中，需要翻译的内容可能还包括各种组件比如antd和boostrap等组件内容的国际化，所以需要结合这些组件内置的国际化工具一起来实现整个项目的多语言。

下面是在具体开发过程中用到的一些API，以及具体开发代码等，以供日后继续学习：

react组件

• IntlProvider
  该组件用于在程序的根组件中设置整个项目的语言环境，配置属性如下：

type IntlConfig = {
    locale?: string,
    formats?: object,
    messages?: {[id: string]: string},

    defaultLocale?: string = 'en',
    defaultFormats?: object = {},

    textComponent? node = 'span',
};

项目中常用的配置有：locale值为表示浏览器的语言环境，messages为键值对，即需要格式化的字符串对应的key、value键值对；formates接受对象，通常设置时间格式和货币等表示方式；

• addLocaleData
  该函数由react-intl包导出，只是babel-plugin-react-intl包的一个钩子，用于提取JavaScript源文件中定义的默认消息。此函数只返回传入的Message Descriptor映射对象。一般不建议这样写，有点累赘。

import {defineMessages} from 'react-intl';
const messages = defineMessages({
    greeting: {
        id: 'app.home.greeting',
        description: 'Message to greet the user.',
        defaultMessage: 'Hello, {name}!',
    },
});

• injectIntl
  该函数由react-intl包导出，是一个高阶组件（它接受一个ReactComponent，并返回一个新的ReactComponent，这一点颇有函数式编程的味道。由于是一个抽象和公用代码的方案，这个新的ReactComponent主要包含一些共用代码的逻辑或者是状态）。它将传入的React组件与另一个React组件包装在一起，该组件通过它为包装组件提供命令式格式化API props。默认情况下，格式化API将通过提供给包装组件props.intl。

import React, {PropTypes} from 'react';
import {injectIntl, intlShape, FormattedRelative} from 'react-intl';

const Component = ({date, intl}) => (
    <span title={intl.formatDate(date)}>
        <FormattedRelative value={date}/>
    </span>
);

Component.propTypes = {
    date: PropTypes.any.isRequired,
    intl: intlShape.isRequired,
};

export default injectIntl(Component);

prop的值是intlShap类型：

    locale: string,
    formats: object,
    messages: {[id: string]: string},

    defaultLocale: string = 'en',
    defaultFormats: object = {},
};

type IntlFormat = {
    formatDate: (value: any, options?: object) => string,
    formatTime: (value: any, options?: object) => string,
    formatRelative: (value: any, options?: object) => string,
    formatNumber: (value: any, options?: object) => string,
    formatPlural: (value: any, options?: object) => string,
    formatMessage: (messageDescriptor: MessageDescriptor, values?: object) => string,
    formatHTMLMessage: (messageDescriptor: MessageDescriptor, values?: object) => string,
};

const intlShape: IntlConfig & IntlFormat & {now: () => number};

IntlConfig：该设置下的key被当做props的值传给父组件，可以通过const {locale,messages} = this.props.intl;来获取；

IntlFormat: 是必须的格式化API，具体介绍如下：

• 日期格式化API
  包括（formaDate,formatTime,formatRelative三个）
  这些API可以通过对应的 <FormattedDate>, <FormattedTime>, and [<FormattedRelative>](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)组件通过props注入到你的组件中，
  其中<FormattedDate> <FormattedTime>可以使用下面的格式化选项：

type DateTimeFormatOptions = {
    localeMatcher: 'best fit' | 'lookup' = 'best fit',
    formatMatcher: 'basic' | 'best fit' = 'best fit',

    timeZone: string,
    hour12  : boolean,

    weekday     : 'narrow' | 'short' | 'long',
    era         : 'narrow' | 'short' | 'long',
    year        : 'numeric' | '2-digit',
    month       : 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',
    day         : 'numeric' | '2-digit',
    hour        : 'numeric' | '2-digit',
    minute      : 'numeric' | '2-digit',
    second      : 'numeric' | '2-digit',
    timeZoneName: 'short' | 'long',
};

<FormattedDate> 该组件需要必须传入value键值作为要解析的内容，然后以<span>形式对结果进行渲染，如果需要其他形式，可以在外面再包裹一层，具体用法如下：

<FormattedDate
  value={new Date(1459832991883)}
  year='numeric'
  month='long'
  day='2-digit'
/>
生成：<span>April 05, 2016</span>

<FormattedTime>该组件与上面组件的区别是，本组件是对时分秒的格式化。其他都相同，具体使用如下：

<FormattedTime value={new Date(1459832991883)}/>
生成：<span>1:09 AM</span>

<FormattedRelative>该组件用来格式化相对时间，具体使用方式如下：

<FormattedRelative value={Date.now()}/>
// <span>now</span>
<FormattedRelative value={10 seconds later}/>
// <span>10 seconds ago</span>
<FormattedRelative value={60 seconds later}/>
// <span>1 minute ago</span>

• 数字格式化API
  包括：formatNumber和formatPlural两个API，都是通过对应的<FormattedNumber>和<FormattedPlural>组件注入；具体用法：

<FormattedNumber value={1000}/>
//<span>1,000</span>

<FormattedPlural
    value={10}
    one='message'
    other='messages'
/>
//<span>messages</span>

• 字符串格式化API
  包括formatMessage和formatHTMLMessage两个；并通过相应的<FormattedMessage>和<FormattedHTMLMessage>组件使用，可以通过它们注入组件props
  用于定义应用程序的默认消息/字符串。<FormattedMessage>并<FormattedHTMLMessage>拥有对应于消息描述符的道具。消息描述符非常适用于提供翻译字符串/消息所需的数据，并且它们包含以下属性：
  id：消息的唯一，稳定标识符
  description：翻译者关于如何在UI中使用它的上下文
  defaultMessage：默认消息（可能是英文）

type MessageDescriptor = {
    id: string,
    defaultMessage?: string,
    description?: string | object,
};

<FormattedMessage>该组件使用formatMessageAPI并且具有props与消息描述符相对应的API 。具体使用方法：

<FormattedMessage
    id='app.greeting'
    description='Greeting to welcome the user to the app'
    defaultMessage='Hello, {name}!'
    values={{
        name: 'Eric'
    }}
/>
//<span>Hello, Eric!</span>

<FormattedMessage id="title">
    {(txt) => (
        <H1>
            {txt}
        </H1>
    )}
</FormattedMessage>
//<h1>Hello, Eric!</h1>

<FormattedMessage
    id='app.greeting'
    description='Greeting to welcome the user to the app'
    defaultMessage='Hello, {name}!'
    values={{
        name: <b>Eric</b>
    }}
/>
//<span>Hello, <b>Eric</b>!</span>

antD组件国际化

在antd中提供了一个LocaleProvider的组件，该组件接受locale属性，该属性的值为当前语言的文案，antd通过react的context将该语言信息以共享的方式传递给被LocaleProvider组件包裹的子组件中，从而实现国际化，下面我们按照实际项目中的代码进行演示：
我们可以新建连个js文件，用来设置对应的语言环境：

import appLocaleData from 'react-intl/locale-data/en';
import antEn from 'antd/lib/locale-provider/en_US'
import messages from './en_US';

window.appLocale = {
  messages: messages,
  locale: 'en-US',
  data: appLocaleData,
  antd:antEn,
};
export default window.appLocale;

其他环境类似，导入对应的语言包，接下来我们需要在入口文件中进行设置，即在应用外层包裹LocaleProvider组件：

import React, {Component} from 'react';
import { Radio, LocaleProvider} from 'antd';
import Entry from './routes/router.jsx';
import ReactDOM from 'react-dom';
import './less/main.less';
import { IntlProvider, addLocaleData } from 'react-intl';

function getLocale(lang){
  let result={};
  switch(lang){
    case 'zh_CN':
    result = require('./locale/zh-CN.config');
    break;
    case 'en_US':
    result = require('./locale/en-US.config');
    break;
    default: result = require('./locale/zh-CN.config');
  }
  return result.default || result;
}//导入对应的语言配置文件

class Lang extends React.Component{
  constructor(props){
      super(props);
      this.state={
          lan:" "
      }
      this.changeLang=this.changeLang.bind(this);
  }
  changeLang(p){
    if(p==="zh-CN"|| p==="default"){
      this.setState(
        {lan:"zh_CN"}
        )
    }
    else {
      this.setState({
        lan:"en_US"
      })
    }
    
  }
  render(){
    const {lan} = this.state;
    const appLocale = getLocale(lan);
    addLocaleData(...appLocale.data);
      return (
      <IntlProvider 
          locale={appLocale.locale} 
          messages={appLocale.messages}
          >
           <LocaleProvider locale={appLocale.antd}>
          <Index />
          </LocaleProvider>
      </IntlProvider>
     )
  }
}

ReactDOM.render(<Lang/>,document.getElementById('best-react-root'));

注：上述代码中，LocaleProvider组件是从antd中导入的，对应locale属性的值也是从antd/lib/locale-provider/...导入的语言包；react-intl实现多语言需要上述组件进行内容格式化外，在项目的主入口导入IntlProvider组件以及addLocaleData方法

写在最后

内容到此结束，欢迎斧正，一起学起！！！