最近在項(xiàng)目中添加了語言國際化的功能。

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10多年品質(zhì)，值得信賴！

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

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

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

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

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

組件用法

為了和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 />

這個(gè)組件用于設(shè)置 i18n 的上下文，它將包裝應(yīng)用程序的根組件，以便整個(gè)應(yīng)用程序?qū)⑴渲迷?i18n 的上下文中.
最主要的兩個(gè)配置項(xiàng)是： loacle 當(dāng)前的語言環(huán)境 messages 當(dāng)前語言的內(nèi)容。

我們要?jiǎng)討B(tài)切換語言，需要?jiǎng)討B(tài)改這兩個(gè)配置。

import zhCN from './locale/zh.js';  //導(dǎo)入 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.使用<FormattedMessage />

基礎(chǔ)用法

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={'hello'}
/>

如果當(dāng)前語言環(huán)境是 中文，它會(huì)顯示你好 ，如果是英文環(huán)境，會(huì)顯示Hello.

動(dòng)態(tài)傳值

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

我們定義 intl.name 的時(shí)候模板里用到了{(lán)name} ,這個(gè)代表我們可以動(dòng)態(tài)傳值，我們可以通過FormattedMessage中的 values 屬性傳一個(gè)JSON對象，這是就會(huì)動(dòng)態(tài)顯示我們的內(nèi)容了。

6.其它組件用法

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

API用法

有時(shí)候我們可能需要在代碼中動(dòng)態(tài)做 國際化，這就需要?jiǎng)討B(tài)API 了。下面我簡單介紹下怎么用

1.導(dǎo)入 injectIntl

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

2.在組件中注入

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

我在項(xiàng)目中用到了Redux，注入的時(shí)候應(yīng)該向上面那樣，如果你沒有用Redux ，只需要 export defuault injectIntl(App)

3.使用 intl 對象

我們通過第二步的注入，現(xiàn)在在我們在 組件的 props 上會(huì)得到一個(gè) intl 對象，它提供的方法和咱們上邊介紹的組件基本相對應(yīng)，這時(shí)候我們想要顯示字符串，可以使用formatMessage 方法：

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

formatMessage的第一個(gè)參數(shù)可以傳入Id， 第二個(gè)參數(shù)傳入 values ，更詳細(xì)的了解，請查看API

結(jié)束語

教程的代碼，我已放到github 上，大家如果需要，自行查看 React-intl

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：React-intl實(shí)現(xiàn)多語言的示例代碼
鏈接分享：http://aaarwkj.com/article30/gppgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、虛擬主機(jī)、網(wǎng)站建設(shè)、App設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)