欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React-intl 實現(xiàn)多語言的示例代碼

 更新時間:2017年11月03日 09:01:06   作者:快樂的開發(fā)者  
本篇文章主要介紹了React-intl 實現(xiàn)多語言的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近在項目中添加了語言國際化的功能。

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

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

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

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

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

組件用法

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

這個組件用于設置 i18n 的上下文,它將包裝應用程序的根組件,以便整個應用程序將配置在 i18n 的上下文中.
最主要的兩個配置項是: loacle 當前的語言環(huán)境 messages 當前語言的內容。

我們要動態(tài)切換語言,需要動態(tài)改這兩個配置。

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

基礎用法

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

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

動態(tài)傳值

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

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

6.其它組件用法

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

API用法

有時候我們可能需要在代碼中動態(tài)做 國際化,這就需要動態(tài)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 對象

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

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

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

結束語

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • ahooks正式發(fā)布React?Hooks工具庫

    ahooks正式發(fā)布React?Hooks工具庫

    這篇文章主要為大家介紹了ahooks正式發(fā)布值得擁有的React?Hooks工具庫使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • React創(chuàng)建組件的三種方式及其區(qū)別是什么

    React創(chuàng)建組件的三種方式及其區(qū)別是什么

    在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類組件和使用React Hooks的函數(shù)式組件,本文就詳細的介紹一下如何使用,感興趣的可以了解一下
    2023-08-08
  • React之PureComponent的使用作用

    React之PureComponent的使用作用

    這篇文章主要介紹了React之PureComponent的使用作用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • React-hooks面試考察知識點匯總小結(推薦)

    React-hooks面試考察知識點匯總小結(推薦)

    這篇文章主要介紹了React-hooks面試考察知識點匯總,Hook?使你在無需修改組件結構的情況下復用狀態(tài)邏輯,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • react中實現(xiàn)修改input的defaultValue

    react中實現(xiàn)修改input的defaultValue

    這篇文章主要介紹了react中實現(xiàn)修改input的defaultValue方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • react?component?function組件使用詳解

    react?component?function組件使用詳解

    這篇文章主要為大家介紹了react?component?function組件的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • React組件三大屬性之state,props,refs

    React組件三大屬性之state,props,refs

    這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-07-07
  • react子組件接收的props賦值給state的陷阱問題

    react子組件接收的props賦值給state的陷阱問題

    這篇文章主要介紹了react子組件接收的props賦值給state的陷阱問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 解決React報錯Property does not exist on type 'JSX.IntrinsicElements'

    解決React報錯Property does not exist on 

    這篇文章主要為大家介紹了React報錯Property does not exist on type 'JSX.IntrinsicElements'解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • React中傳遞組件的三種方式小結

    React中傳遞組件的三種方式小結

    通過傳遞組件,我們可以將復雜組件內部的一部分 UI 交由外部組件來控制渲染,這也是控制反轉(Inversion of Control)的一種體現(xiàn),在 React 中,我們可以通過三種方式來傳遞組件,本文就來給大家述說這三種方式,需要的朋友可以參考下
    2023-07-07

最新評論