初探React技術棧（三）

時間 2020-08-18

標籤初探 react 技術欄目 React 简体版

原文原文鏈接

react-intl

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

$ npm or cnpm
$ npm install react-intl --save

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

效果演示

新建語言包（en,zh）

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

# 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綁定

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

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)