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.js1 directory, 4 files# 其中js为语言配置文件 en/英 zh/中

自定义的语言JSON

// en_US.JSON{    "test": "test"}// zh_CN.json{    "test": "测试"}// 注意本地的语言包一定要对应上

主要的配置JS

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