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

背景

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

思路

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

实现步骤

一、安装环境

需要同时安装 i18next 和 react-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、在组件中使用

在 函数式组件 中使用useTranslation 的 hook 来处理国际化

// 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'
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口自动化项目落地之HTTPBin网站

原文&#xff1a;https://www.cnblogs.com/df888/p/16011061.html 接口自动化项目落地系列 找个开源网站或开源项目&#xff0c;用tep实现整套pytest接口自动化项目落地&#xff0c;归档到电子书&#xff0c;作为tep完整教程的项目篇一部分。自从tep完整教程发布以后&#…

C语言:结构体

目录 结构体类型的声明 匿名结构体 全局结构体变量 嵌套结构体 访问结构体成员 结构的自引用 结构体变量的定义和初始化 结构体内存对齐 结构体内存对齐规则 修改默认对齐数 #pragma pack(n) offsetof 求结构体成员相对于结构体开头的偏移量的宏。 为什么存在内存…

pip list 和 conda list的区别

PS : 网上说conda activate了之后就可以随意pip了 可以conda和pip混用 但是安全起见还是尽量用pip 这样就算activate了&#xff0c;进入base虚拟环境了 conda与pip的区别 来源 Conda和pip通常被认为几乎完全相同。虽然这两个工具的某些功能重叠&#xff0c;但它们设计用于不…

硬件开发笔记(十二):RK3568底板电路电源模块和RTC模块原理图分析

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/134429973 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

清华源Certificate verification failed解决办法

Certificate verification failed: The certificate is NOT trusted. The certificate chain uses expired certificate. Could not handshake: Error in the certificate verification. sudo update-ca-certificates

C++之type traits

目录 帮助类std::integral_constantbool_constant 主要类型分类std::is_voidis_null_pointeris_integralis_floating_pointis_arrayis_enumis_unionis_classis_functionis_pointeris_lvalue_referenceis_rvalue_referenceis_member_object_pointeris_member_function_pointer 组…

rpc依赖安装

依赖&#xff1a; 0、boost&#xff1a;用于实现多线程等&#xff1b; 1、protobuf&#xff1a;用于实现数据的序列化、反序列化&#xff0c;也用于定义和生成rpc数据及接口&#xff1b; 2、libevent&#xff1a;用于实现基于IO多路复用机制的网络事件循环。 其实可以直接用包…

JAVA sql 查询

-- 1. 查询员工表所有数据&#xff0c;并说明使用*的缺点 SELECT * from employees -- *号查询效率低 -- 2. 查询所员工的 email 全名,公司 email 统一以 "qq.com " 结尾. SELECT email from employees WHERE email like "%qq.com" -- 3. 打印公司里…

庖丁解牛:NIO核心概念与机制详解 06 _ 连网和异步 I/O

文章目录 Pre概述异步 I/OSelectors打开一个 ServerSocketChannel选择键内部循环监听新连接接受新的连接删除处理过的 SelectionKey传入的 I/O回到主循环 Pre 庖丁解牛&#xff1a;NIO核心概念与机制详解 01 庖丁解牛&#xff1a;NIO核心概念与机制详解 02 _ 缓冲区的细节实现…

Go基础面经大全(持续补充中)

Go基础 1. 基础特性 Go的优势 天生支持并发&#xff0c;性能高。 单一的标准代码格式&#xff0c;比其他语言更具可读性。 自动垃圾收集机制比Java和Python更有效&#xff0c;因为它与程序同时执行。 Go数据类型 int, string, float, bool, array, slice, map, channel, p…

如何将本地Portainer管理界面结合cpolar内网穿透工具实现远程浏览器访问

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 Portainer 是一个轻量级的容器管理工具&#xff0c;可以通过 Web 界面对 Docker 容器进行管理和监控。它提供了可…

Android修行手册-POI操作中文API文档

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

LLM模型-讯飞星火与百度文心api调用

spark-wenxin 1-讯飞星火1_1-SparkApi.py1_2- Chat_spark.py1_3-调用api 2-百度文心2_1.code 3-两者之间比较与openai 1-讯飞星火 进入讯飞官网进行创建应用&#xff0c;获取相关密钥APPID&#xff0c;APISecret&#xff0c;APIKey&#xff0c;选择最新版本 首次调用讯飞官方a…

redis三种集群方式

redis有三种集群方式&#xff1a;主从复制&#xff0c;哨兵模式和集群。 1.主从复制 主从复制原理&#xff1a; 从服务器连接主服务器&#xff0c;发送SYNC命令&#xff1b; 主服务器接收到SYNC命名后&#xff0c;开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所…

Git的简单使用

Git的简介 Git是一个分布式版本控制工具&#xff0c;通常用来对软件开发过程中的源代码文件进行管理。通过Git仓库来存储和管理这些文件&#xff0c;Git仓库分为两种&#xff0c;一个是本地仓库&#xff1a;开发人员自己电脑上的Git仓库&#xff0c;一个是远程仓库&#xff1a;…

centos FreeXL源码编译

安装、编译 https://www.gaia-gis.it/gaia-sins/freexl-2.0.0.zip wget https://www.gaia-gis.it/gaia-sins/freexl-2.0.0.zip#centos yum install -y minizip minizip-devel expat-devel ./configure --prefix/usr/local/freexl-2.0.0#Ubuntu apt install libminizip libmin…

学习c#的第十六天

目录 C# 正则表达式 定义正则表达式 字符转义 字符类 定位点 分组构造 Lookaround 概览 数量词 反向引用构造 替换构造 替代 正则表达式选项 其他构造 Regex 类 代码示例 实例 1 实例 2 实例 3 C# 正则表达式 正则表达式 是一种匹配输入文本的模式。.Net 框…

PHP比较漏洞, 代码审计, 字符串数字, “0e“字符串, 布尔值比较, 极限值, switch比较, in_array比较

PHP比较漏洞 一, 字符串与数字比较,0e’字符串比较 在 PHP 中处理字符串和数字比较时需要小心谨慎的重要性&#xff0c;尤其是在安全敏感的应用中。 在某些情况下&#xff0c;PHP 的类型强制转换可能会导致意外和潜在的安全漏洞。 var_dump("admin" 0); //true …

RecyclerView嵌套布局,导致RecyclerView复用失效 解决

前言&#xff1a;使用NestedScrollView嵌套RecyclerView。 解决步骤一&#xff1a;固定高度 NestedScrollView嵌套RecyclerView时&#xff0c;RecyclerView的高度是无限大&#xff0c;所以要将RecyclerView设置固定高度。在代码中固定的&#xff0c;灵活度更高。 binding.nest…

键盘方向键移动当前选中的table单元格,并可以输入内容

有类似于这样的表格&#xff0c;用的<table>标签。原本要在单元格的文本框里面输入内容&#xff0c;需要用鼠标一个一个去点以获取焦点&#xff0c;现在需要不用鼠标选中&#xff0c;直接用键盘的上下左右来移动当前正在输入的单元格文本框。 const currentCell React.u…