React项目国际化-React-intl

安装 React-intl

npm install react-intl -save
npm install intl --save

引用React-intl

import { addLocaleData, IntlProvider, FormattedMessage } from 'react-intl'; /* react-intl imports */
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
addLocaleData([...en, ...zh]);  // 引入多语言环境的数据
import CN from '../../language/CN'     // import defined messages in Chinese
import US from '../../language/US'    // import defined messages in English

创建locale配置文件

这里，我们将文件命名为CN.tsx和US.tsx，代表中文和美式英语的配置包。

// chinese
const CN = {
    // 通用
    query: '查询',
    examine: '审核',
    ...
}
export default CN;

// english
const US = {
    // 通用
    query: 'Query',
    examine: 'Check',
    ...
}
export default US;

使用<IntlProvider />

在根标签外添加可以多层嵌套（如在中文网站中加入英文的内容）

 render(    
        <IntlProvider 
            locale={'en'} 
            messages={CN}
        >
            <App />
        </IntlProvider>,    
        document.getElementById('container')
);

自动识别浏览器加载语言

chooseLocale(){
    switch(navigator.language.split('_')[0]){
        case 'en':
            return 'US';
            break;
        case 'zh':
            return 'CN';
            break;
        ...
        ...
        ...
        default:
            return 'CN';
            break;
    }
}
render(    
        <IntlProvider 
            locale={navigator.language} 
            messages={chooseLocale()}
            >
            <App />
        </IntlProvider>,    
        document.getElementById('container')
);

使用<FormattedMessage />

<FormattedMessage
    // tagName = 'div'(可以自定义标签默认span)
    id='query'
    // values={
    //   someone:<b>this.props.name</b>,（动态参数）
   //  }
 />

如果有动态参数需要在locale配置文件中：

query:"查询，{ someone } !"

输出中英文分别为：
<span> 查询 </span>
<span> Query </span>

日期时间

a. <FormattedDate /> 用于格式化日期，能够将一个时间戳格式化成不同语言中的日期格式。

传入时间戳作为参数：

<FormattedDate     value={new Date(1459832991883)}/>

输出结果：

<span>4/5/2016</span>

b. <FormattedTime> 用于格式化时间，效果与<FormattedDate />相似。

传入时间戳作为参数：

<FormattedTime    value={new Date(1459832991883)}/>

输出结果：

<span>1:09 AM</span>

c. <FormattedRelative /> 通过这个组件可以显示传入组件的某个时间戳和当前时间的关系，比如 “ 10 minutes ago"。

传入时间戳作为参数：

<FormattedRelative     value={Date.now()}/>

输出结果:

<span>now</span>

10秒之后的输出结果：

<span>10 seconds ago</span>

1分钟之后的输出结果：

<span>1 minute ago</span>

数字量词

a. <FormattedNumber /> 这个组件最主要的用途是用来给一串数字标逗号，比如10000这个数字，在中文的语言环境中应该是1,0000，是每隔4位加一个逗号，而在英语的环境中是10,000，每隔3位加一个逗号。

传入数字作为参数：

<FormattedNumber     value={1000}/>

输出结果：

<span>1,000</span>

b. <FormattedPlural /> 这个组件可用于格式化量词，在中文的语境中，其实不太会用得到，比如我们说一个鸡腿，那么量词就是‘个’，我们说两个鸡腿，量词还是‘个’，不会发生变化。但是在英文的语言环境中，描述一个苹果的时候，量词是apple，当苹果数量为两个时，就会变成apples，这个组件的作用就在于此。

传入组件的参数中，value为数量，其他的为不同数量时对应的量词，在下面的例子中，一个的时候量词为message，两个的时候量词为messages。实际上可以传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了所有的情况。

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

传入组件的量词参数可以是一个字符串，也可以是一个组件，我们可以选择传入<FormattedMessage />组件，就可以实现量词的不同语言的切换。

输出结果：

<span>messages</span>

字符串的格式化

在实际使用中会遇到只使用字符串的时候这时可以
先在需要的页面导入模块

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即为所需要的中英文内容