首頁  >  文章  >  web前端  >  React-intl 實作多語言範例詳解

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

小云云
小云云原創
2017-12-28 10:39:022701瀏覽

最近在專案中加入了語言國際化的功能。本文主要介紹了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.使用78027ad14f95509ca193f1736648969d

基礎用法


<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

相關建議:

PHP - 實作多語言自動切換

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

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

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

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