React-intl

React-Intl 用于国际化 React 组件，提供 React 组件和 API 来格式化日期、数字、字符串（包括单复数和翻译） 。

用法说明

1、安装react-intl

npm install react-intl --save

2、引入react-intl，配置语言环境数据。React-Intl依赖这些数据来支持单复数和相对时间格式化的功能；

本示例基于React, antd框架构建页面，代码如下：

import React from 'react';

import { ConfigProvider } from 'antd';
import en_GB from 'antd/lib/locale-provider/en_GB';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

//注意：如下引入多语言环境方式只在2.9.0及之前的版本有效，3.0以后版本不再适用
import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
addLocaleData([...en, ...zh]);  // 引入多语言环境的数据

import Users from './Users';
//导入 i18n 配置文件,需要手动创建并填入语言转换信息
import zhCN from './langConfig/zh-CN.js';
import enGB from './langConfig/en-GB.js';

//本地平台国际化
const langMap = {
    'zh': zhCN,
    'en': enGB
};

//antd平台国际化
const localeConfig = {
    'zh': zh_CN,
    'en': en_GB
};

//获取浏览器语言环境
function chooseLocale(){
    var localeValue = navigator.language.split('-')[0];
    return localeValue;
}

class MainSubGroup extends React.Component{
    constructor(){
        super();
        this.state = {
            
        };
    }
    //使用<IntlProvider>组件包裹需要实现国际化的根组件
    render(){
        return (
            <ConfigProvider locale={localeConfig[chooseLocale()]}>
                <IntlProvider 
                    locale={navigator.language}
                    messages={langMap[chooseLocale()]}
                >
                    <Users />
                </IntlProvider>
            </ConfigProvider>
        );
    }
}

export default MainSubGroup;

3、创建locale配置文件

这里，我们在langConfig文件夹下，创建语言文件 zh-CN.js 和 en-GB.js，代表中文和英式英语的配置包。

./langConfig/zh-CN.js

const zh_CN = {
    'intl.SEARCH': '查询',
    'intl.SELECT': '选择',
    'intl.SAVE': '保存',
    'intl.ALL': '全部',
    'intl.YES': '是',
    'intl.NO': '否',
    'intl.OK': '确定',
    'intl.CANCEL': '取消',
    'intl.CLOSE': '关闭',
};

export default zh_CN;

./langConfig/en-GB.js

const en_GB = {
    'intl.SEARCH': 'Search',
    'intl.SELECT': 'Select',
    'intl.SAVE': 'Save',
    'intl.ALL': 'All',
    'intl.YES': 'Yes',
    'intl.NO': 'No',
    'intl.OK': 'Ok',
    'intl.CANCEL': 'Cancel',
    'intl.CLOSE': 'Close',
};

export default en_GB;

4、在组件中的进行国际化实现

4.1 如果是纯文字页面，可以采用如下方式处理:

import { FormattedMessage } from 'react-intl';

<FormattedMessage id="intl.SEARCH"/>

4.2 如果包含下拉选项或者placeholder等特殊需要国际化的，则需要采用如下方式:

4.2.1 在文件头部引入如下代码

import { injectIntl, FormattedMessage, FormattedDate } from 'react-intl';

这里FormattedMessage用于国际化文本内容，FormattedDate用于国际化日期内容

4.2.2 组件国际化处理

injectIntl(UserSearch)

4.2.3 国际化内容信息

class UserSearch extends React.Component{
    constructor(props){
        super(props);
    }
    ...
    省略代码
    ...
    render(){
        //获取国际化实例对象
        var intl = this.props.intl;

        //依据获取到的国际化实例对象，对文字内容进行处理
        . . . . . .
        省略代码
        . . . . . .
    }
}

• 文字内容国际化

  intl.formatMessage({id: 'intl.ADD'})

• Select下拉选项国际化, 用FormattedMessage 将option选项包起来

  <FormattedMessage id="intl.ALL" >{txt => <option value="all">{txt}</option>}</FormattedMessage>

  // 整体如下:

  <select className="ui dropdown search-dropdown" name="srcType" onChange={this.handleSourceTypeChange}>
      <FormattedMessage id="intl.ALL" >{txt => <option value="all">{txt}</option>}</FormattedMessage>
  </select>

  或者

  let txt = intl.formatMessage({id: 'intl.ALL'});
  <option value="all">{txt}</option>

• input文本框中placeholder文字的国际化

  <FormattedMessage id="intl.ENTER_TML_NAME" >{txt => <input type="text" name="tmlName" id="tmlName" placeholder={txt} maxLength="50" style={{width: '100%'}}/>}</FormattedMessage>

  或者

  let userNameMessage = intl.formatMessage({id: 'intl.USER_NAME'});//"请输入用户名称"
  <input type="text" name="tmlName" id="tmlName" placeholder={userNameMessage} maxLength="50" style={{width: '100%'}}/>

注意事项

进行国际化处理时，要注意当前package.json文件的配置，支持react-intl@2.9.0 版本的没有问题，可以npm start，也可以npm run build；如果采用最新版本3.x以上版本，则npm start不会报错，npm run build会出现打包失败的情况

因此，决定采用react-intl@2.9.0版本，在国际化时，需要引入react-intl中的区域库信息，进行如下操作:

import zh from 'react-intl/locale-data/zh'; 
import en from 'react-intl/locale-data/en'; 
addLocaleData([...zh,...en]);