使用 react intl 实现 React 组件国际化

开始以前，先了解目前经常使用的 React 国际化插件：The Best Libraries for React i18n。由于看上去使用方法比较简单，我先选择了 react-i18next。可是使用过程当中遇到不少问题，不想继续浪费时间，因而转而使用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]);  // 引入多语言环境的数据  
   复制代码

   虽然我只用到了文本翻译的功能，觉得就不须要加载这些数据，但后来发现这是必须的步骤。否则会报错：

   [React Intl] Missing locale data for locale: "zh". Using default locale: "en" as fallback.
   复制代码

3. 使用<IntlProvider>组件包裹须要实现国际化的根组件，这个组件树以后就会在配置的i18n上下文中了。 因为项目中用到了react-hot-loader，根组件 Main被<AppContainer>包裹了，而且是从单独的一个文件 import 了 Main 组件。

   //app.js
   import { AppContainer } from 'react-hot-loader'
   import Main from './components/Main'
   //... ...
   const render = Component => {
       ReactDOM.render(
           <AppContainer>
               <Component />
           </AppContainer>,
           document.getElementById('app')
       )
   }
   render(Main);
   复制代码

   因而直接在 Main.js 中使用<IntlProvider>组件。把它加到 render()返回节点的最外层就好了。

   // 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>
   复制代码

   到这里，基本的国际化就实现了。

更进一步

• 文本中添加变量。

  // en_US.js
  const en_US = {
      helloSomeone: "Hello, {name}!"
  }
  // zh_CN.js
  const zh_CN = {
      helloSomeone: "{name}，你好！"
  }
  复制代码

  <FormattedMessage id="helloSomeone" values={{name:"Evelyn"}}/>
  复制代码

• 在任意组件，获取当前页面语言。 基于以上的配置，能够看出当前语言是英语仍是中文，取决于Main组件的 state.lang。那若是在其余组件中想要知道当前语言呢？方法一是直接传递给Main组件的子组件的props，但因为使用了 react-router不方便使用这方法；因而选择了方法二。 React Intl 提供一个API，injectIntl，能够把命令式格式化的 API 注入到任意组件的props中。而后能够在那个组件中经过this.props.intl直接去调用一些API和属性，好比this.props.intl.locale的值就是当前语言了。

  

injectIntl 的使用方法能够看官方文档的例子，这里不赘述了。

• 自定义标签名，不生成<span>。好比生成 <p>。

  <FormattedMessage id="hello" tagName="p" />
  复制代码

• 生成的文本中包含富文本。在messages中直接包含富文本无效，不会被解析。能够经过values传值时，加上富文本，好比：

  <FormattedMessage 
    id="helloSomeone" 
    tagName="div" 
    values={{
      name:<p className="name">Evelyn</p>
    }} />
  复制代码

  注意此处name不是字符串，而是 React 元素。结果为：

  <div>Hello, <p class="name">Evelyn</p>!</div>
  复制代码

• **自定义生成的节点。**好比，生成一个按钮：

  <FormattedMessage id='hello'>
      {(txt) => (
        <input type="button"
          className="btn-hello"
          onClick={this.handleClickHello.bind(this)}
          value={txt} />
      )}
  </FormattedMessage>
  复制代码

  txt对应messages中的文本。当语言为en时生成结果：

  <input type="button" class="btn-hello" value="Hello!">
  复制代码

  此时再定义tagName属性是无效的。

参考阅读

1. The Best Libraries for React i18n: phraseapp.com/blog/posts/…
2. React Intl wiki: github.com/yahoo/react…