初探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 在项目中的用法 配置过程 以及整体配置的思路