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

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

背景

平时中会遇到需求,就是切换语言,语种等。其实总的来说都是用i18n来实现的

思路

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

实现步骤

一、安装环境

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

npm install react-i18next i18next --save

二、配置文件

src下新建i18n文件夹,以存放国际化相关配置

i18n中分别新建三个文件

  • config.ts:对 i18n 进行初始化操作及插件配置
  • en.json:英文语言配置文件
  • zh.json:中文语言配置文件

2.1、config.ts

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: 'zh',
    interpolation: {
        escapeValue: false,
    },
});
export default i18n;

2.2、zh.json

{
        "language":"语言",
        "switch":"选择",
}

2.3、en.json

{
   "language":"Language",
   "switch":"Switch",
}

三、使用

3.1、引用配置文件

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

import Page1 from './page1';
import Page2 from './page2';
// 引用配置文件
import '../i18n/config';
export default function IndexPage() {
  return (
    <div>
      <Page1 />
      <Page2 />
    </div>
  );
}

3.2、在组件中使用

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

// 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) 来完成语言配置的数据注入

// 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 中配置 切换语言

// 函数式组件
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;
//  类式组件
import i18n from 'i18next';
const changeLanguage= (val) => {
  i18n.changeLanguage(val); // 传入 'en' / 'zh'
};
目录
相关文章
|
6月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
178 0
|
6月前
|
自然语言处理 前端开发 JavaScript
【第52期】一文读懂React国际化 (i18n)
【第52期】一文读懂React国际化 (i18n)
723 1
|
6月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
331 0
|
1月前
|
JSON 自然语言处理 前端开发
React国际化中英文切换实现
React国际化中英文切换实现
|
2月前
|
资源调度 Kubernetes 前端开发
react-intl——react国际化使用方案
react-intl——react国际化使用方案
|
6月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
6月前
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
106 2
|
6月前
|
自然语言处理 前端开发
深入解析 React-i18next:在 React 中实现国际化(二)
深入解析 React-i18next:在 React 中实现国际化(二)
173 0
|
6月前
|
自然语言处理 资源调度 前端开发
深入解析 React-i18next:在 React 中实现国际化(一)
深入解析 React-i18next:在 React 中实现国际化(一)
1187 0
|
6月前
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
680 0