React-intl 實作多語言範例詳解

最近在專案中加入了語言國際化的功能。本文主要介紹了React-intl 實作多語言的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

語言國際化，也有人說成是語言在地化，其實就是為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吧。 </script>

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

這個元件用於設定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=&#39;zh&#39; messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5.使用

基礎用法

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={&#39;hello&#39;}
/>

如果目前語言環境是中文，它會顯示你好，如果是英文環境，會顯示Hello.

動態傳值

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

我們定義intl.name 的時候模板裡用到了{name} ,這個代表我們可以動態傳值，我們可以透過FormattedMessage中的values 屬性傳一個JSON對象，這是就會動態顯示我們的內容了。

6.其它組件用法

Ract-intl 為我們提供了豐富的組件，可以幫我們很好的處理字符串，時間，日期，大家可以自己查看API，如有不明白的地方，我可以留言。

API用法

有時候我們可能需要在程式碼中動態做 國際化，這就需要動態API 了。下面我簡單介紹下怎麼用

1.導入injectIntl​​

#

import { injectIntl, FormattedMessage } from 'react-intl';

2.在元件中註入

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

我在專案中用到了Redux，注入的時候應該向上面那樣，如果你沒有用Redux ，只需要export defuault injectIntl​​(App)

3.使用intl 物件

我們透過第二步的注入，現在在我們在組件的props 上會得到一個intl 對象，它提供的方法和咱們上邊介紹的組件基本上相對應，這時候我們想要顯示字符串，可以使用formatMessage方法：

const {intl} = this.props;
　　
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

formatMessage的第一個參數可以傳入Id， 第二個參數傳入values ，更詳細的了解，請查看API

相關建議：

PHP - 實作多語言自動切換

ASP.NET Core中的多語言支援的圖文詳解

有關ASP.NET Core 中的多語言支援的詳細介紹

以上是React-intl 實作多語言範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！