首頁  >  文章  >  後端開發  >  實例講解React-intl 實作多語言

實例講解React-intl 實作多語言

小云云
小云云原創
2017-12-12 09:21:032067瀏覽

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

最近在專案中加入了語言國際化的功能。

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

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

所以這並不只是一個簡單的字元替換問題,而且,我們要很方便的匯出一個目錄,放到word或page當中,給到其他同事對照著進行翻譯工作,這個非常重要! !難道你要讓產品經理直接在程式碼裡改麼?或者你想一個一個搜尋替換?不考慮清楚就乾的話,相信我,You'll pay for this。

身為一個有追求的程式碼家,你一定不希望在index.html當中增加一行2934a685527f5cd6bcb20a3dc28499e1引用吧?另外,UI中的文字全部都是使用圖片的那個同學,請起立,滾。如果想要在一個React專案中,優雅的import something from somewhere,然後將介面中的文字用853af8b98c01bde0c90f51d58d0c3ce0 元件替代,最後透過簡單的配置實現語言的國際化,那我們就用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.使用1905fd125854d59ec1f7dec72e3298cf

這個元件用於設定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.使用12e09664183759a27c35bf8019a3976f

基礎用法

#
<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 &#39;react-intl&#39;;

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: &#39;intl.name&#39;},{name: &#39;joe&#39;});

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

相關推薦:

React 內部機制探針

React中元件的寫法有哪些

React事件系統知識

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn