react-intl

React Intl

React Intl 用于国际化 React 组件，提供 React 组件和 API 来格式化日期，数字，字符串（包括单复数和翻译） 。这次只用它实现文本翻译。

用法

1. 安装

npm install react-intl --save

2. 载入语言环境数据。React Intl 依赖这些数据来支持单复数和相对时间格式化的功能。

// Main.js
import { addLocaleData } 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]);  // 引入多语言环境的数据  

3. 使用<IntlProvider>组件包裹需要实现国际化的根组件，例如：

/ Main.js
import { addLocaleData, IntlProvider } from 'react-intl'; /* react-intl imports */
render(){
    return (
        <IntlProvider>
          //··· ···
        </IntlProvider>
    )
}

4. 添加多种语言对应的文本。比如要支持中英文，为了方便之后维护，可以新建两个文件：

   // en_US.js
   const en_US = {
       hello: "Hello!"，
       //... ...
   }
   export default en_US;
   

// zh_CN.js
const zh_CN = {
    hello: "你好！"，
    //... ...
}
export default zh_CN;

然后在Main.js中引入这两个变量。

// Main.js
import zh_CN from "../locale/zh_CN"     // import defined messages in Chinese
import en_US from "../locale/en_US"     // import defined messages in English

5. 全局配置当前的语言，和相对应的文本。即配置<IntlProvider>组件的两个属性locale和messages。

   // Main.js
   render(){
       let messages = {}
       messages['en'] = en_US;
       messages['zh'] = zh_CN;
       return (
           <IntlProvider locale={this.state.lang} messages={messages[this.state.lang]}>
               //··· ···
           </IntlProvider>
       )
   }
   

6. 这样基本配置就完成了，可以通过改变 this.state.lang的值来改变页面语言。

   // Main.js
   /**
    * Change language
    * @param {String} lang new language
    */
   changeLanguage(lang) {
       this.setState({
           lang: lang
       })
   }
   

7. 接下来，添加翻译的文本到页面中。
   基本只需要使用到一个组件：<FormattedMessage>。这个组件默认生成一个<span>，内容是翻译后的文本，也就是 messages中对应字段的值。
   在需要添加国际化文本的组件中，引入FormattedMessage组件。

import { FormattedMessage  } from 'react-intl'; /* react-intl imports */
//... ...
<FormattedMessage id="hello" />

当前语言为en时，生成结果：

<span>Hello!</span>