最近在項目中添加了語言國際化的功能。

語言國際化，也有人說成是語言本地化，其實就是為Web App添加多語言，我們的項目當前包含了中文版和英文版，按理來說『逐字替換』也不是多大事兒，但是，這么Low的做法，有錢途嗎？

一開始的時候，我考慮的是傳統的為整個項目添加config文件，根據不同的語言和地區，加載不同的config文件，就能夠達到界面語言切換的目的。當然，也正是因為這個想法太過于幼稚，所以才被稱為『一開始』的想法。語言的國際化不僅僅是將界面上的UI文字翻譯成另一種語言，還包括了日期&時間顯示，數字顯示（英文環境下每隔3位一個逗號：1,000），量詞的顯示（一個蘋果是apple，兩個蘋果就應該是apples），甚至還有一個字符串中間插了一個變量的情況（"今天午飯吃了{count}個雞腿"）...

所以這并不只是一個簡單的字符替換問題，并且，我們要很方便的導出一個目錄，放到word或者page當中，給到其他同事對照著進行翻譯工作，這個非常重要！！難道你要讓產品經理直接在代碼里改么？或者你想一個一個搜索替換？不考慮清楚就干的話，相信我，You'll pay for this。

作為一個有追求的代碼家，你肯定不希望在index.html當中增加一行<Script>引用吧？另外，UI中的文字全部都是使用圖片的那個同學，請起立，滾。如果想要在一個React項目中，優雅的import something from somewhere，然后將界面中的文字用<首字母大寫 /> 組件替代，最后通過簡單的配置實現語言的國際化，那我們就用React-intl吧。

React 做國際化，我推薦使用 React-intl , 這個庫提供了 React 組件和Api兩種方式來格式化日期，數字和字符串等。知道這個庫了，那讓我們開始使用它

組件用法

為了和React 比較融和，我們可以使用組件的方式

1.安裝

npm install react-intl --save

2.添加引用

import {IntlProvider, addLocaleData} from 'react-intl';

3.添加 locale 配置文件

zh-CN.js

const zh_CN = { 'intl.hello': "你好", 'intl.name': '我的名字是 {name}' } export default zh_CN;

en-US.js

const en_US = { 'intl.hello': "hello", 'intl.name': 'my name is {name}' } export default en_US;

4.使用<IntlProvider />

這個組件用于設置 i18n 的上下文，它將包裝應用程序的根組件，以便整個應用程序將配置在 i18n 的上下文中.
最主要的兩個配置項是： loacle 當前的語言環境 messages 當前語言的內容。

我們要動態切換語言，需要動態改這兩個配置。

import zhCN from './locale/zh.js';  //導入 i18n 配置文件import enUS from './locale/en.js';addLocaleData([...en, ...zh]);export default class Root extends Component {  static propTypes = {    store: PropTypes.object.isRequired,    history: PropTypes.object.isRequired  }  render() {    const { store , history } = this.props;    return (      <IntlProvider locale='zh' messages={zhCN}>        <Provider store={store}>          <Router history={history}>          </Router>        </Provider>      </IntlProvider>    )  }}