在react hook中可以使用i18n实现国际化语言切换,实现效果如下:
第一步,需要先下载对应的库。
npm install i18next i18next-browser-languagedetector react-i18next
i18n对应的库下载完成后,在根目录文件下创建一个文件夹,文件夹里面创建i18n的文件。
i18n.js代码设置如下:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
const resources = {
en: {
translation: {
hello:'hello!',
welcome:'welcome!'
}
},
cn:{
translation:{
hello:'你好!',
welcome:'欢迎!'
}
}
};
i18n
.use(LanguageDetector)
.use(initReactI18next).init({
resources,
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
export default i18n;
LanguageDetector 在这里的作用是持久化存储,如果觉得这个不好用,可以不用它进行持久化存储,可以自己手写一个语言存储持久化逻辑(建议手写),这里使用是为了方便演示。
一般来说,translation对应的对象是一个翻译文档,数据是比较多的,可以在i18n下创建对应的语言文档,然后将文件引进来就可以了 。
这样就配置完了,在配置完i18n文件后,在对应需要翻译的页面引入i18n文件。
例如,在主文件中引入i18n文件将文件初始化运行起来,然后在需要翻译的页面中解构出useTranslation方法。
在需要翻译的页面中,利用const { t } = useTranslation(),然后利用t('语言文档对应的key')实现页面国际化语言切换。
主文件完整代码如下:
import './App.css';
import React, {useEffect,useState} from 'react';
import { Select} from "antd";
import {useTranslation} from "react-i18next";
import './lang/i18n'
import i18n from "./lang/i18n";
const {Option} = Select
function App() {
const { t } =useTranslation();
const [value,setValue] = useState('')
useEffect(()=>{
//查看是否存在默认语言
const lang = localStorage.getItem('i18nextLng');
if(lang){
setValue(lang)
}
},[])
return (
<div className="App" style={{paddingTop:20}}>
<div style={{width:'100%',height:200}}>
<Select style={{width:150}} value={value} onChange={(value)=>{
i18n.changeLanguage(value);
setValue(value)
}}>
<Option value={'en'}>English</Option>
<Option value={'cn'}>中文</Option>
</Select>
</div>
{/* 切换语言示例 */}
<div>{t('hello')}</div>
<div>{t('welcome')}</div>
</div>
);
}
export default App;
在代码select框onChange事件中,利用i18n.changeLanguage实现语言切换的效果。