初探React技術棧（三）

react-intl

對於一些項目而言單一語言已經不能知足需求了，因此咱們也要嘗試一下使用react的多語言解決方案，在以前使用vue的時採用的是vue-i18n多語言解決方案，可是在react中i18n支持的不是特別好，因此就選用react-intl

$ npm or cnpm
$ npm install react-intl --save
複製代碼

這次多語言與之相匹配的ui是Ant Design,適配的也是相應的國際化,同時切換語言配置時，始終是以爲沒有加載，直接替換是更好的體驗。因此須要redux做爲支持，具體redux的使用請參看個人上一篇文章

效果演示

新建語言包（en,zh）

首先新建一個文件夾lang這個做爲本地語言包。

# lang文件夾目錄結構
.
├── en_US.js
├── locale
│   ├── en_US.json 
│   └── zh_CN.json
└── zh_CN.js

1 directory, 4 files

# 其中js爲語言配置文件 en/英 zh/中
複製代碼

自定義的語言JSON

// en_US.JSON
{
    "test": "test"
}
// zh_CN.json
{
    "test": "測試"
}
// 注意本地的語言包必定要對應上
複製代碼

主要的配置JS

// en_US.js
import appLocaleData from 'react-intl/locale-data/en' 
import enLocal from './locale/en_US.json'
import enUS from 'antd/lib/locale-provider/en_US'

const en = {
    data: appLocaleData, // react-intl 語言包
    locale: enLocal, // 自定義的語言包
    localeName: 'en', // 配置命名
    antd: enUS // antd 語言包
}

export default en

// zh_CN.js
import appLocaleData from 'react-intl/locale-data/zh'
import zhLocal from './locale/zh_CN.json'
import zhCN from 'antd/lib/locale-provider/zh_CN'

const zh = {
    data: appLocaleData,
    locale: zhLocal,
    localeName: 'zh',
    antd: zhCN
}

export default zh
複製代碼

與redux綁定

// action 
function changeLang (text) {
    return { type: 'changeLang', text: text }
}
// 定義切換語言的action

// reducer
// 語言包
import zh from '../../lang/zh_CN'
import en from '../../lang/en_US'

// 默認語言爲英文
const Initstate = {
    // 讀取本地存儲 來決定當前語言環境
    lang: window.localStorage.getItem('lang') === 'zh' ? zh : en
}
const Common = (state = Initstate, action) => {
    switch (action.type) {
        case 'changeLang':
                // 防止用戶刷新 語言回到初始狀態
                window.localStorage.setItem('lang', action.text)
                return {...state, lang: action.text === 'zh' ? zh : en}
        default:
                return state
    }
}
複製代碼

這樣redux與react-intl已經綁定在一塊兒了,調用changeLang以達到改變語言的摩的

與react綁定

想要實現多語言切換無刷新，應把總體的切換操做放在react執行流中，修改redux的同時會刷新視圖層，基於這種特性纔會把多語言的切換綁定到redux中。

App.jsx

react 組件中的使用

import React, { Component } from 'react'

import { injectIntl } from 'react-intl'

class IntlComponent extends Component {
    render () {
        let { intl } = this.props
        return (
            <div> { intl.messages['test'] } {/*調用方式*/} {/*有一種場景 好比獲取驗證碼 須要有秒數 可是 中英文切換的時候 須要符合語義 那麼就不能使用拼接的方式 而 react-intl 給咱們提供了一種方式 formatMessage */} { intl.formatMessage({id: 'code_tip'},{s: '2'}) } { /* // en_US.JSON { "test": "test", "code_tip": "Get the captcha again after {s} seconds" } // zh_CN.json { "test": "測試", "code_tip": "{s}秒後從新獲取驗證碼" } */ } </div>
        )
    }
}

export default injectIntl(IntlComponent)
複製代碼

連接

個人博客

Blog_demo 本文react-intl_demo

react-intl examples

結語

以上就是使用與配置react-intl的全過程了，我會一步步搭建總體的項目，項目的demo都在個人github中後續將會描述 react-router 在項目中的用法 配置過程 以及總體配置的思路