本文主要介紹了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='zh' messages={zhCN}> <Provider store={store}> <Router history={history}> </Router> </Provider> </IntlProvider> ) } }
5.使用12e09664183759a27c35bf8019a3976f
基礎用法
<FormattedMessage id="intl.hello" defaultMessage={'hello'} />
如果目前語言環境是中文,它會顯示你好,如果是英文環境,會顯示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
相關推薦:
以上是實例講解React-intl 實作多語言的詳細內容。更多資訊請關注PHP中文網其他相關文章!