react中利用i18n实现国际化语言切换

在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实现语言切换的效果。

react中利用i18n实现国际化语言切换

猜你喜欢