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}) => (
);
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可以通过对应的[](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)组件通过props注入到你的组件中，
其中可以使用下面的格式化选项：
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',
};
// now
- 数字格式化API
包括：formatNumber和formatPlural两个API，都是通过对应的和 组件注入；具体用法：
//1,000
- 字符串格式化API
包括formatMessage和formatHTMLMessage两个；并通过相应的props
用于定义应用程序的默认消息/字符串。
id：消息的唯一，稳定标识符
description：翻译者关于如何在UI中使用它的上下文
defaultMessage：默认消息（可能是英文）
type MessageDescriptor = {
id: string,
defaultMessage?: string,
description?: string | object,
};
formatMessageAPI并且具有props与消息描述符相对应的API 。具体使用方法：
{(txt) => (
{txt}
)}
//Hello, Eric!
Eric
}}
/>
//Hello, Eric!
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 (
)
}
}
ReactDOM.render(注：上述代码中，LocaleProvider组件是从antd中导入的，对应locale属性的值也是从antd/lib/locale-provider/...导入的语言包；react-intl实现多语言需要上述组件进行内容格式化外，在项目的主入口导入IntlProvider组件以及addLocaleData方法
写在最后
内容到此结束，欢迎斧正，一起学起！！！