React 中 react-i18next 切换语言( 项目国际化 )

思路

首先在项目中安装i18n插件,然后将插件引入到项目,然后配置语言包(语言包需要你自己来进行配置,自己编写语言包,或者你能找到跟你项目适配的也可以),然后就用特定的方法来展示可以切换语言的字段

实现步骤

一、安装环境

需要同时安装 i18nextreact-i18next 依赖:

npm install react-i18next i18next --save

二、配置文件

src下新建i18n文件夹,以存放国际化相关配置
i18n中分别新建三个文件

  • config.ts:对 i18n 进行初始化操作及插件配置

  • en.json:英文语言配置文件

  • zh.json:中文语言配置文件

2.1、config.ts
javascript 复制代码
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translation_en from './en.json';
import translation_zh from './zh.json';


const resources = {
  en: {
    translation: translation_en,
  },
  zh: {
    translation: translation_zh,
  },
};

// 进行初始化
i18n.use(initReactI18next).init({
  // 我们自己的语言文件
  resources,
  // 默认语言  zh/en  中文/英文
  lng: localStorage.getItem('language') || 'zh',
  interpolation: {
    escapeValue: false,// 不会为了xss攻击,而把我们的内容强行转成字符串
  },
});

export default i18n;
2.2、zh.json
javascript 复制代码
{
  "language": "语言",
  "switch": "选择",
}
2.3、en.json
javascript 复制代码
{
  "language": "Language",
  "switch": "Switch",
}

三、使用

3.1、引用配置文件

在 page 的index.tsx中引用i18n的配置文件 :import '../i18n/config';

javascript 复制代码
import Page1 from './page1';
import Page2 from './page2';
// 引用配置文件
// import '../i18n/config';
import '@/i18n/config';
 
export default function IndexPage() {
  return (
    <div>
      <Page1 />
      <Page2 />
    </div>
  );
}
 
3.2、在组件中使用

函数式组件 中使用useTranslationhook 来处理国际化

javascript 复制代码
// Page1 函数式组件
import React from 'react';
// 引入 useTranslation 
import { useTranslation } from 'react-i18next';
 
const Page1: React.FC = () => {
  const { t } = useTranslation();
  return (
    <div>
      <p>这是Page1</p>
      <p>{t('language')}</p>
    </div>
  );
};
 
export default Page1;
 

类组件 中使用withTranslation 高阶函数(HOC) 来完成语言配置的数据注入

javascript 复制代码
// Page2  类组件
import React from 'react';
// 引入HOC高阶函数 withTranslation 和 i18n 的ts类型定义 WithTranslation
import { withTranslation, WithTranslation } from 'react-i18next';
 
class ClassComponent extends React.Component<WithTranslation> {
  render() {
    const { t } = this.props;
    return (
    	<div>
     		<p>{t('language')}</p>
    	</div>
    );
  }
}
// withTranslation 完成语言配置数据注入
export const Page2 = withTranslation()(ClassComponent); 
 
3.3、切换语言

使用changeLanguage() config 中配置 切换语言

通过调用这个i18n changeLanguage(languageType) 这样一个方法就可以简单的修改我们当前的语言

javascript 复制代码
// 函数式组件
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
 
const Page1: React.FC = () => {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <button onClick={() => i18n.changeLanguage(i18n.language == 'en' ? 'zh' : 'en')}>
        {i18n.language == 'en' ? 'zh' : 'en'}
      </button>
      <p>{t('language')}</p>
    </div>
  );
};
 
export default Page1;
javascript 复制代码
//  类式组件
import i18n from 'i18next';
 
const changeLanguage= (val) => {
	i18n.changeLanguage(val); // 传入 'en' / 'zh'
};

3.4、 在reducer中要操作i18n的配置文件

javascript 复制代码
import i18n from "i18next";
 
export interface LanguageState {
    language: string
    languageList: { name: string, code: string }[]
}
 
const defaultState: LanguageState = {
    language: "zh",
    languageList: [
        { name: "中文", code: "zh" },
        { name: "English", code: "en" },
    ],
}
 
export default (state = defaultState, action) => {
    console.log(state,action)
    if (action.type === 'change_language') {
        i18n.changeLanguage(action.payload); // 这样处理是不标准的,有副作用
        const newState = { ...state, language: action.payload  }
        return newState
    }
    return state
}
相关推荐
hello-alien1 个月前
ASP.NetCore---I18n(internationalization)多语言版本的应用
c#·asp.net·i18n·多国语言·语言切换
applebomb2 个月前
【高阶用法】uniapp的i18n/修复/增强/App无重启更换语言
typescript·uni-app·vue·i18n·unibest
溜_x_i_a_o_迪3 个月前
Vue实现国际化与国际化原理深究(前端国际化通用解决方案)
前端·javascript·vue.js·国际化·i18n·js·通用解决方案
开源博客4 个月前
Flask API 如何接入 i18n 实现国际化多语言
python·flask·i18n
开源博客4 个月前
Vue3 如何接入 i18n 实现国际化多语言
前端·vue·i18n·vite
一舍予5 个月前
Vue I18n国际化插件
javascript·vue.js·i18n·前端国际化
Muizai5 个月前
使用vscode插件du-i18n处理前端项目国际化翻译多语言
前端·vscode·国际化·i18n
猫猫村晨总5 个月前
vue-i18n使用步骤详解(含完整操作步骤)
javascript·vue.js·i18n
坐忘3GQ5 个月前
53.Python-web框架-Django开始第一个应用的多语言
前端·python·django·i18n·多语言