使用react-intl-universal实现多语

react-intl-universal 介绍

https://www.npmjs.com/package...

示例

语言包 en-US.js

const en_US = {
    'intl.hello': "hello",
    'intl.name': 'my name is 张三',
    'intl.age': 'my age is 30',
    "content": "This is <span style='color:red'>HTML</span>",
    'intl.changeLang':'changeLanguage'
}
export default en_US;

语言包 zh-CN.js

const zh_CN = {
    'intl.hello': "你好",
    'intl.name': '我的名字是张三',
    'intl.age': '我的年龄是30',
    "content": "这是一个 <span style='color:red'>HTML</span> 标签",
    'intl.changeLang':'切换语言'
}
export default zh_CN;

改造 Basic Example

import React from 'react';
import intl from 'react-intl-universal'
import cn from '../../assets/locales/zh-CN'
import us from '../../assets/locales/en-US'
class IntlOldLearn extends React.Component{
    constructor(){
        super()
        this.locales={
            "zh_CN":cn,
            "en_US":us
        }
        this.state={
            intlDone:false
        }
        this.defaultLocale = sessionStorage['locale']?sessionStorage['locale']:'zh_CN'
    }
    componentDidMount() {
        this.initLocale()
    }
    initLocale(locale="zh_CN"){
        intl.init({
            currentLocale:sessionStorage['locale']?sessionStorage['locale']:locale,
            locales:this.locales
        }).then(()=>{
            this.setState({intlDone:true})
        })
    }
    changeLanguage = ()=>{
        if(this.defaultLocale==='zh_CN'){
            this.defaultLocale = 'en_US'
        }else{
            this.defaultLocale = 'zh_CN'
        }
        sessionStorage['locale']= this.defaultLocale
        this.initLocale(this.defaultLocale)
    }
    
    render(){
        return(
            <div>
                {this.state.intlDone&&<div>
                    {intl.get("intl.hello")}
                    <br/>
                    {intl.getHTML('content')}
                    <br/>
                    <button onClick={()=>this.changeLanguage()}>  {intl.getHTML('intl.changeLang')}</button>
                </div>}
            </div>
        )
    }
}
export default IntlOldLearn

封装高阶组件

可复用的多语高阶组件

import React from 'react';
import intl from 'react-intl-universal'

export default function IntlHoc(WithComponent,locales){
    return class IntlHocComponent extends React.Component{

        constructor(){
            super()
            this.state={
                intlDone:false
            }
            if(locales){
                this.locales=Object.keys(locales);
                //Object.keys({key1:value1,key2:value2,key3:value3,...,keyn:valuen}) ==>> [key1,key2,key3,...keyn]
                this.defaultLocale = sessionStorage['locale']?sessionStorage['locale']:this.locales[0]
            }
            
        }

        componentDidMount() {
            this.initLocale()
        }

        initLocale(locale="zh_CN"){
            intl.init({
                currentLocale:sessionStorage['locale']?sessionStorage['locale']:locale,
                locales:locales
            }).then(()=>{
                this.setState({intlDone:true})
            })
        }

        render(){
            let newProps ={
                intlDone:this.state.intlDone,
                intl:intl,
                setLocale:this.initLocale.bind(this),
                defaultLocale:this.defaultLocale
            }
            return <WithComponent {...this.props} {...newProps}/>
        }
    }
}

使用高阶组件

import React from 'react';
import cn from '../../assets/locales/zh-CN'
import us from '../../assets/locales/en-US'
import InitHoc from '../../components/intlHoc/index'
const locales = {
    "zh_CN":cn,
    "en_US":us
}
class IntlLearn extends React.Component{
    constructor(props){
        super(props)
        this.defaultLocale = props.defaultLocale
    }
    changeLanguage = ()=>{
        if(this.defaultLocale==='zh_CN'){
            this.defaultLocale = 'en_US'
        }else{
            this.defaultLocale = 'zh_CN'
        }
        sessionStorage['locale']= this.defaultLocale
        this.props.setLocale(this.defaultLocale)
    }
    
    render(){
        const {intlDone,intl}=this.props
        return(
            <div>
                {intlDone&&<div>
                    {intl.get("intl.hello")}
                    <br/>
                    {intl.getHTML('content')}
                    <br/>
                    <button onClick={()=>this.changeLanguage()}>  {intl.getHTML('intl.changeLang')}</button>
                </div>}
            </div>
        )
    }
}
export default InitHoc(IntlLearn,locales)

结果

点击切换语言