react实现国际化react-intl

react-intl提供了React组件和一个API，用于格式化日期，数字和字符串，包括复数形式和处理翻译，相比较来说，我更喜欢用这个。如下便是使用的步骤：

1、安装

  npm install react-intl --save

2、创建语言文件如下

// 可以在assets文件夹中创建文件名为locale，文件夹中放入语言文件

// 1、简体中文文件  zh.js
export default {
    query: '查询',
    examine: '审核',
};

//英文文件 en.js
export default {
    query: 'Query',
    examine: 'Check',
};

3、引用并使用<IntlProvider />

由于项目用的是router4.0，固我将<App />及路由配置放入到router.js单独的一个文件里。在项目的入口文件index.js引入

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/reset.less';
import IRouter from './router';
import * as serviceWorker from './serviceWorker';
// 国际化
import { IntlProvider } from "react-intl";
import en from "./assets/locale/en";
import zh from "./assets/locale/zh"; 
const translationData = {
    'zh-CHS': zh,
    "en": en
  };
const currentLanguage = navigator.language.search(/zh/) > -1 ?  'zh-CHS' : "en";//根据浏览器设置当前语言

ReactDOM.render(
    <IntlProvider locale={currentLanguage} messages={translationData[currentLanguage]} >
        <IRouter />
    </IntlProvider>
, document.getElementById('root'));


serviceWorker.unregister();

4、应用

1、只使用字符串

//需要的页面导入模块
import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl';

//在模块导出时需要
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(Statistics));

//在需要用到的地方
 const { intl } = this.props;
let query = intl.formatMessage({ id: 'query' }); // query即为所需要的中英文内容