中英文互译

在你的项目或者页面里写一个中英文互译让我们的项目高大上起来吧 用 react 哦！！

首先要创建一个js文件或者ts文件 作为我们中英文互译的组件

下载引入一下该抱

import intl from  'react-intl-universal'
import { EventEmitter } from 'events'

下载好之后我们要创建连个json文件

一个中文的json文件和一个英文的json文件

中文

{
"Translation":{
        "Chinese":"汉语",
        "English":"英语"
    }
}

英文

{ "Translation":{
        "Chinese":"Chinese",
        "English":"English"
    }

}

写好之后将这两个json文件引入我们写中英文互译的js文件或ts文件中

//中文
import zn from './ch.json'
//英文
import en from './en.json'

不废话了这是功能代码都有注释应该可以看懂吧

export const emitter = new EventEmitter()

const locales = {
  zn,en
}

//默认是中文哦
const lange = localStorage.getItem('lange') || 'zn'

//点击不同的语言，需要重新初始化一下
//使用enentEmitter 进行事件的订阅发布
//在选择不同的语言时 触发一个方法 在方法中修改语言 

//定义一个方法
emitter.on('change_langes' , (lange:string) => {
    localStorage.setItem('lange' , lange)
    //刷新页面
    window.location.reload()
})


//初始化
intl.init({
    currentLocale:lange, //当前语言
    locales //语言包
})

//抛出方法
export default intl

下面是使用方法

在要使用中英文互译的地方调用我们的组件哦

这是刚刚写的组建

import intl，{emitter}om './***/***

写一个小小的方法

const changeLanguage = (lange: string) => {
    emitter.emit('change_langes', lange)
  }

调用方法

//                              要对应上          json里的数据哦
<p onClick={() => changeLanguage('en') }>{intl.get('Translation.English')}</p>
<p onClick={() => changeLanguage('zn') }>{intl.get('Translation.Chinese')}</p>

这样就完成了