使用 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…