開始之前弥雹，先了解目前常用的 React 國際化插件：The Best Libraries for React i18n坯癣。因?yàn)榭瓷先ナ褂梅椒ū容^簡單，我先選擇了 react-i18next已亥。但是使用過程中遇到很多問題炼团，不想繼續(xù)浪費(fèi)時(shí)間，于是轉(zhuǎn)而使用react-intl击吱。事實(shí)證明及時(shí)改變方案是明智的淋淀。

React Intl

React Intl 用于國際化 React 組件，提供 React 組件和 API 來格式化日期覆醇，數(shù)字朵纷，字符串（包括單復(fù)數(shù)和翻譯） 。這次只用它實(shí)現(xiàn)文本翻譯永脓。

用法

1. 先安裝： npm install react-intl --save 袍辞。

2. 載入語言環(huán)境數(shù)據(jù)。React Intl 依賴這些數(shù)據(jù)來支持單復(fù)數(shù)和相對時(shí)間格式化的功能常摧。

   // 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]);  // 引入多語言環(huán)境的數(shù)據(jù)  
   

   雖然我只用到了文本翻譯的功能搅吁，以為就不需要加載這些數(shù)據(jù)威创，但后來發(fā)現(xiàn)這是必須的步驟。不然會(huì)報(bào)錯(cuò)：

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

3. 使用<IntlProvider>組件包裹需要實(shí)現(xiàn)國際化的根組件谎懦，這個(gè)組件樹之后就會(huì)在配置的i18n上下文中了肚豺。
   由于項(xiàng)目中用到了react-hot-loader，根組件 Main被<AppContainer>包裹了界拦，并且是從單獨(dú)的一個(gè)文件 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()返回節(jié)點(diǎn)的最外層就行了享甸。

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

4. 添加多種語言對應(yīng)的文本截碴。比如要支持中英文，為了方便之后維護(hù)蛉威，可以新建兩個(gè)文件：

   // 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中引入這兩個(gè)變量聚凹。

   // 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. 全局配置當(dāng)前的語言，和相對應(yīng)的文本齐帚。即配置<IntlProvider>組件的兩個(gè)屬性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. 接下來湘今，添加翻譯的文本到頁面中。
   基本只需要使用到一個(gè)組件：<FormattedMessage>剪菱。這個(gè)組件默認(rèn)生成一個(gè)<span>摩瞎，內(nèi)容是翻譯后的文本，也就是 messages中對應(yīng)字段的值孝常。
   在需要添加國際化文本的組件中旗们，引入FormattedMessage組件。

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

   當(dāng)前語言為en時(shí)构灸，生成結(jié)果：

   <span>Hello!</span>
   

   到這里上渴，基本的國際化就實(shí)現(xiàn)了。

更進(jìn)一步

• 文本中添加變量喜颁。

  // en_US.js
  const en_US = {
      helloSomeone: "Hello, {name}!"
  }
  // zh_CN.js
  const zh_CN = {
      helloSomeone: "{name}稠氮，你好！"
  }
  

  <FormattedMessage id="helloSomeone" values={{name:"Evelyn"}}/>
  

• 在任意組件半开，獲取當(dāng)前頁面語言隔披。
  基于以上的配置，可以看出當(dāng)前語言是英語還是中文寂拆，取決于Main組件的 state.lang奢米。那如果在其他組件中想要知道當(dāng)前語言呢芥炭？方法一是直接傳遞給Main組件的子組件的props，但由于使用了 react-router不方便使用這方法恃慧；于是選擇了方法二园蝠。
  React Intl 提供一個(gè)API，injectIntl痢士，可以把命令式格式化的 API 注入到任意組件的props中彪薛。然后可以在那個(gè)組件中通過this.props.intl直接去調(diào)用一些API和屬性，比如this.props.intl.locale的值就是當(dāng)前語言了怠蹂。
  

  injectIntl 把 API 注入到組件的 props 中

injectIntl 的使用方法可以看官方文檔的例子善延，這里不贅述了。

• 自定義標(biāo)簽名城侧，不生成<span>易遣。比如生成 <p>。

  <FormattedMessage id="hello" tagName="p" />
  

• 生成的文本中包含富文本嫌佑。在messages中直接包含富文本無效豆茫，不會(huì)被解析∥菀。可以通過values傳值時(shí)揩魂，加上富文本，比如：

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

  注意此處name不是字符串炮温，而是 React 元素火脉。結(jié)果為：

  <div>Hello, <p class="name">Evelyn</p>!</div>
  

• 自定義生成的節(jié)點(diǎn)。比如柒啤，生成一個(gè)按鈕：

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

  txt對應(yīng)messages中的文本倦挂。當(dāng)語言為en時(shí)生成結(jié)果：

  <input type="button" class="btn-hello" value="Hello!">
  

  此時(shí)再定義tagName屬性是無效的。

參考閱讀

1. The Best Libraries for React i18n: https://phraseapp.com/blog/posts/react-i18n-best-libraries/
2. React Intl wiki: https://github.com/yahoo/react-intl/wiki#getting-started