本文主要介绍了react-intl实现React国际化多语言的方法，分享给大家，具体如下：效果预览效果预览效果预览React Intl 国际化步骤React Intl 国际化步骤React Intl 国际化步骤

创建国际化资源文件

根据语言获取国际化资源

引入 react-intl 的 local data

创建 LocaleProvider 国际化上下文组件

创建 react-intl 国际化上下文组件

使用 react-intl's components & apis，进行国际化开发
创建国际化资源文件根据语言获取国际化资源引入 react-intl 的 local data创建 LocaleProvider 国际化上下文组件创建 react-intl 国际化上下文组件使用 react-intl's components & apis，进行国际化开发1. 创建国际化资源文件
1. 创建国际化资源文件目前我们管理资源文件的方式是在 src/locales 文件夹下：

.
├── en-US.js
├── en-US.messages.js
├── zh-Hans.js
└── zh-Hans.messages.js

.
├── en-US.js
├── en-US.messages.js
├── zh-Hans.js
└── zh-Hans.messages.js
*.messages.js 是我们的资源文件(这里我们采用了 js 格式，你也可以使用 json 等等)，返回的是一个对象，key 为我们翻译用的 id，value 为具体语言的翻译，内容是：

export default {
'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.',
'page.localeProvider.react.html': '

{ name } makes it painless to create interactive UIs. Design simple views for each state in your application, and { name } will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

',
'page.localeProvider.unreadCount': 'You have {unreadCount} new {notifications}',
'page.localeProvider.title.date': 'Current date: ',
'page.localeProvider.title.time': 'Current time: ',
'page.localeProvider.title.relative': 'Relative current time: ',
'page.localeProvider.title.number': 'Comma number: ',
'page.localeProvider.title.price': 'Price: ',
'page.localeProvider.title.percent': 'Percent: ',
};
export default {
'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.',
'page.localeProvider.react.html': '

{ name } makes it painless to create interactive UIs. Design simple views for each state in your application, and { name } will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

',
'page.localeProvider.unreadCount': 'You have {unreadCount} new {notifications}',
'page.localeProvider.title.date': 'Current date: ',
'page.localeProvider.title.time': 'Current time: ',
'page.localeProvider.title.relative': 'Relative current time: ',
'page.localeProvider.title.number': 'Comma number: ',
'page.localeProvider.title.price': 'Price: ',
'page.localeProvider.title.percent': 'Percent: ',
};en-US.js 文件封装了 messages、locale 等国际化上下文组件需要的内容：

import appLocaleData from 'react-intl/locale-data/en';
// 引入组件多语言
import paginationLocale from '@/components/pagination/locales/en-US';
import messages from './en-US.messages';

window.appLocale = {
// 合并所有 messages, 加入组件的 messages
messages: Object.assign({}, messages, {

Pagination: paginationLocale,
}),

// locale
locale: 'en-US',

// react-intl locale-data
data: appLocaleData,

// 自定义 formates
formats: {

date: {

normal: {

hour12: false,

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

},

},

// 货币

money: {

currency: 'USD',

},
},
};

export default window.appLocale;

import appLocaleData from 'react-intl/locale-data/en';
// 引入组件多语言
import paginationLocale from '@/components/pagination/locales/en-US';
import messages from './en-US.messages';

window.appLocale = {
// 合并所有 messages, 加入组件的 messages
messages: Object.assign({}, messages, {

Pagination: paginationLocale,
}),

// locale
locale: 'en-US',

// react-intl locale-data
data: appLocaleData,

// 自定义 formates
formats: {

date: {

normal: {

hour12: false,

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

},

},

// 货币

money: {

currency: 'USD',

},
},
};

export default window.appLocale;
有了这些资源文件以及相关的封装之后，我们就可以在 LocaleProvider 和 InltProvider 中使用了。
2. 根据语言加载国际化资源
2. 根据语言加载国际化资源上一步我们创建了不同语言版本的国际化资源文件，我们还需要一个函数能够根据语言，加载对应的资源文件：

/**
* 获取国际化资源文件
*
* @param {any} lang
* @returns
*/
function getLocale(lang) {
let result = {};
switch (lang) {

case 'zh-CN':

result = require('./locales/zh-Hans');

break;

case 'en-US':

result = require('./locales/en-US');

break;

default:

result = require('./locales/zh-Hans');
}

return result.default || result;
}

/**
* 获取国际化资源文件
*
* @param {any} lang
* @returns
*/
function getLocale(lang) {
let result = {};
switch (lang) {

case 'zh-CN':

result = require('./locales/zh-Hans');

break;

case 'en-US':

result = require('./locales/en-US');

break;

default:

result = require('./locales/zh-Hans');
}

return result.default || result;
}
3. 引入 react-intl 的 local data
3. 引入 react-intl 的 local data3. 引入 react-intl 的 local data
import { addLocaleData } from 'react-intl';
...

render() {
const appLocale = getLocale('en-US');
addLocaleData(...appLocale.data);
...
}

import { addLocaleData } from 'react-intl';
...

render() {
const appLocale = getLocale('en-US');
addLocaleData(...appLocale.data);
...
}
react-intl 在做国际化的时候需要一些特有的 local data，主要是进行相对时间翻译时，比如昨天、今天、明天、几分钟前、几个月前之类的。我们通过 addLocaleData 这个方法加载相关内容，大家可以根据实际情况加载需要的 locale-data。
4. 创建 LocaleProvider 国际化上下文组件
4. 创建 LocaleProvider 国际化上下文组件
为了组件能够国际化资源信息，我们需要一个 LocaleProvider 组件，用它来提供国际化的上下文，具体用法：

export default class LocaleProvider extends React.Component {
static propTypes = {

children: PropTypes.any,

locale: PropTypes.object,
};

static childContextTypes = {

// 语言信息

locale: PropTypes.object,
};

getChildContext() {

return {

locale: {

...this.props.locale,

},

};
}

render() {

return React.Children.only(this.props.children);
}
}

export default class LocaleProvider extends React.Component {
static propTypes = {

children: PropTypes.any,

locale: PropTypes.object,
};

static childContextTypes = {

// 语言信息

locale: PropTypes.object,
};

getChildContext() {

return {

locale: {

...this.props.locale,

},

};
}

render() {

return React.Children.only(this.props.children);
}
}
5. 创建 react-intl 国际化上下文组件
5. 创建 react-intl 国际化上下文组件为了能够使用 react-intl 进行国际化，跟 redux 这些框架一样，我们需要一个 Provider Component，用它来提供国际化的上下文，具体用法：

...
import { addLocaleData, IntlProvider } from 'react-intl';
import LocaleProvider from '@/components/locale-provider';
import Home from '@/views/home';
...

render() {
// 根据语言获取国际化资源
const appLocale = getLocale('en-US');
addLocaleData(...appLocale.data);

return (




locale={appLocale.locale}

messages={appLocale.messages}

formats={appLocale.formats}

>






);
}

...
import { addLocaleData, IntlProvider } from 'react-intl';
import LocaleProvider from '@/components/locale-provider';
import Home from '@/views/home';
...

render() {
// 根据语言获取国际化资源
const appLocale = getLocale('en-US');
addLocaleData(...appLocale.data);

return (




locale={appLocale.locale}

messages={appLocale.messages}

formats={appLocale.formats}

>






);
}
LocaleProvider 有三个配置参数：

locale,