前端开发中不同语言【react-i18next】

目录

查看并设置语言

单页面:html lang

​编辑

浏览器

自定义翻译

原理/实现

react-i18next【hook只能在函数组件中】

设置

模块:staticData.ts

散(重复利用):命名空间.json

应用 

准备

html标签


查看并设置语言

单页面:html lang

  • 英语: <html lang="en">
  • 中文: <html lang="zh"> 或 <html lang="zh-CN">

"CN" 则表示该语言的特定区域,即中华人民共和国(China)。

更符合语言标准的规范

  • 西班牙语: <html lang="es">
  • 法语: <html lang="fr">
  • 日语: <html lang="ja">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your Webpage Title</title>
</head>
<body><!-- Your webpage content goes here -->
</body>
</html>

浏览器

自定义翻译

原理/实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Translation Example</title>
</head>
<body><script>
const translationContext = {t: (key) => {// 获取浏览器当前语言const userLanguage = navigator.language || navigator.userLanguage;// 默认翻译const defaultTranslations = {"No modifications at present.": "No modifications at present.","Time Error: Current creation time is earlier than the server time, unable to submit.": "Time Error: Current creation time is earlier than the server time, unable to submit.",// 添加其他英文翻译};// 按语言选择翻译const zhCNTranslations = {"No modifications at present.": "当前无修改","Time Error: Current creation time is earlier than the server time, unable to submit.": "时间异常,当前创建时间早于服务器端时间,无法提交",// 添加其他中文翻译};const currentTranslations = ['zh', 'zh-CN', 'cn'].includes(userLanguage) ? zhCNTranslations : defaultTranslations;// 示例翻译const translatedText = currentTranslations[key] || defaultTranslations[key] || key;// 在控制台输出翻译结果console.log(translatedText);console.log(userLanguage);// 可以将翻译结果插入到页面中// document.body.innerHTML = translatedText;return translatedText;},
};// 示例使用
translationContext.t("No modifications at present.");
translationContext.t("Time Error: Current creation time is earlier than the server time, unable to submit.");
</script></body>
</html>

react-i18next【hook只能在函数组件中】

设置

模块:staticData.ts
export function getFeatures(lang: string){if(lang==='cn'){return [{title: '免费',description:  ['你好',...],},{...}]}else{return [{title: 'Free',description: ['hi~~~😄',....],},{....],}]}}
散(重复利用):命名空间.json

应用 

  • t (translate) 函数: 这个函数用于翻译文本。

  • i18n 对象: 这是一个包含有关国际化设置的对象,其中包括当前语言环境等信息。

语言环境的判断和切换通常是由 i18n 对象处理的。

i18n.language 的默认值通常由 i18next 库的 language 配置项决定。

在没有明确设置 language 配置项的情况下,i18next 会尝试根据浏览器的语言首选项(navigator.language)来设置默认语言

i18n.language; // 当前语言环境

i18n.changeLanguage('en'); // 切换到英语

准备
import { useTranslation } from 'react-i18next';
import { getFeatures } from './staticData';export default function HomeContent() {const { t, i18n } = useTranslation(['home', 'login']);const features = getFeatures(['zh', 'zh-CN', 'cn'].includes(i18n.language) ? 'cn' : 'en')
html标签
<h1 className="font-bold text-2xl">{t('Sign in/Sign up')}</h1>
{features?.map((item, index) => (<div className='flex flex-col items-center p-4 md:w-1/2' key={item.title}><div className=' min-w-full h-full bg-[#2A2935] rounded-lg p-4'><div className=' text-2xl leading-loose md:leading-tight'>{item.title}{item.subtitle && <span className=' text-xs text-gray-400 ml-2'>( {item.subtitle} )</span>}</div>{item.description.map((item, index) => (<div className=' text-xs text-gray-400 leading-relaxed' key={index}>- {item}</div>))}</div></div>))}

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

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

相关文章

网神 SecGate 3600 防火墙 route_ispinfo_import_save 文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

Excel——有效性、二级菜单联动

一、录入规范数据 1.手动输入序列录入有效性信息 选择需要录入有效性的所有单元格 选择【数据】——【有效性】——【有效性】 在【允许】输入的值之间选择【序列】 在【序列】输入框中输入想要选择的值&#xff0c;中间用逗号&#xff08;必须是英文逗号&#xff09;隔开 。…

同步和异步、阻塞与非阻塞

一、同步和异步的概念 首先同步和异步是访问数据的机制 同步&#xff1a;同步一般指主动请求并等待IO操作完成的方式异步&#xff1a;主动请求数据后便可以继续处理其它任务&#xff0c;随后等待IO操作完毕的通知 两者的区别&#xff1a;同步会一行一行执行代码&#xff0c;而…

Multisim14.0仿真(五十五)汽车转向灯设计

一、功能描述&#xff1a; 左转向&#xff1a;左侧指示灯循环依次闪亮&#xff1b; 右转向&#xff1a;右侧指示灯循环依次闪亮&#xff1b; 刹车&#xff1a; 所有灯常亮&#xff1b; 正常&#xff1a; 所有灯熄灭。 二、主要芯片&#xff1a; 74LS161D 74LS04D 74…

SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式 基础(持续更新~)

具体操作&#xff1a; day2: 作用&#xff1a; 出现跨域问题 配相对应进行配置即可解决&#xff1a; IDEA连接的&#xff0c;在url最后加参数?useSSLfalse注意链接密码是123&#xff08;docker中mysql密码&#xff09; 注意&#xff0c;虚拟机中设置的密码和ip要和主机上…

GO语言集成开发 JetBrains GoLand 2023 中文

JetBrains GoLand 2023是一款专为Go语言开发者打造的集成开发环境&#xff08;IDE&#xff09;。它基于IntelliJ IDEA平台&#xff0c;提供了丰富的功能和工具&#xff0c;旨在提高开发效率和质量。GoLand 2023具备强大的Go语言支持&#xff0c;包括语法高亮、自动补全、代码提…

手把手教你设计接口自动化测试用例:提取接口信息并分析

随着市场需求的变化&#xff0c;大部分企业在招聘测试人员时&#xff0c;都会提出接口自动化测试的相关要求&#xff0c;为什么会这样呢&#xff1f; 目前&#xff0c;软件构架基本上都是前后端分离的&#xff0c;软件的主要功能由服务端提供。从整个软件测试市场来看&#xf…

【实训】网络系统集成课程实训(vlan、vrrp、nat)

目录 一 实训概述 1.1 实训目的 1.2 实训内容 二 实训原理 2.1 VLAN间划分及VLAN间通信 2.2 BGP&#xff0c;边界网关协议 BGP是运行于 TCP 上的一种自治系统的路由协议&#xff0c;用于在AS之间实现路由信息的交互。 2.2.1 VRRP原理 2.2.2 OSPF配置 三&#xff0e;实训…

Spring Boot + flowable 快速实现工作流

背景 使用flowable自带的flowable-ui制作流程图 使用springboot开发流程使用的接口完成流程的业务功能 文章来源&#xff1a;https://blog.csdn.net/zhan107876/article/details/120815560 一、flowable-ui部署运行 flowable-6.6.0 运行 官方demo 参考文档&#xff1a; htt…

C++ 调用lua 脚本

需求&#xff1a; 使用Qt/C 调用 lua 脚本 扩展原有功能。 步骤&#xff1a; 1&#xff0c;工程中引入 头文件&#xff0c;库文件。lua二进制下载地址&#xff08;Lua Binaries&#xff09; 2&#xff0c; 调用脚本内函数。 这里调用lua 脚本中的process函数&#xff0c;并…

安装Pytorch中的torchtext之CUDA版的正确方式

安装Pytorch和torchtext&#xff1a; Previous PyTorch Versions | PyTorch Installing previous versions of PyTorchhttps://pytorch.org/get-started/previous-versions/ 上面的命令如下&#xff1a; pip install torch2.1.2 torchvision0.16.2 torchaudio2.1.2 --index-…

小白都能看懂的力扣算法详解——链表(一)

&#xff01;&#xff01;本篇所选题目及解题思路均来自代码随想录 (programmercarl.com) 一 203.移除链表元素 题目要求&#xff1a;给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回新的头节点。 203.…

数据库管理-第145期 最强Oracle监控EMCC深入使用-02(20240205)

数据库管理145期 2024-02-05 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09;1 监控方式2 度量配置3 阻塞4 DG监控总结 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09; 作者&#xff1a;胖头鱼的鱼缸&…

Java后端技术助力,党员学习平台更稳定

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Text Mesh Pro图文混排如何对任何图片都能实现

1&#xff09;Text Mesh Pro图文混排如何对任何图片都能实现 2&#xff09;Unity iOS平台的小图占用特别大的内存 3&#xff09;只在编辑器内&#xff0c;纹理不开启Read&Write情况下&#xff0c;如何获取纹理所有颜色值 4&#xff09;准备在海外发行游戏&#xff0c;有哪些…

07-Java桥接模式 ( Bridge Pattern )

Java桥接模式 摘要实现范例 桥接模式&#xff08;Bridge Pattern&#xff09;是用于把抽象化与实现化解耦&#xff0c;使得二者可以独立变化 桥接模式涉及到一个作为桥接的接口&#xff0c;使得实体类的功能独立于接口实现类&#xff0c;这两种类型的类可被结构化改变而互不影…

还是蓝海项目?浅谈steam海外道具搬运项目几个常见问题!

做steam这个项目做了已经3年多了。记得刚开始做的时候还是一个很冷门的项目&#xff0c;现在越来越多的朋友也开始了解这个项目。 其中不乏很多已经在别的地方了解过后来找我咨询的朋友。我发现一些同行或者说自媒体太过于虚假宣传&#xff0c;把steam这个项目说的太好了。也有…

Flink实战六_直播礼物统计

接上文&#xff1a;Flink实战五_状态机制 1、需求背景 现在网络直播平台非常火爆&#xff0c;在斗鱼这样的网络直播间&#xff0c;经常可以看到这样的总榜排名&#xff0c;体现了主播的人气值。 人气值计算规则&#xff1a;用户发送1条弹幕互动&#xff0c;赠送1个荧光棒免费…

海外云手机的核心优势

随着5G时代的到来&#xff0c;云计算产业正处于高速发展的时期&#xff0c;为海外云手机的问世创造了一个可信任的背景。在资源有限且需求不断增加的时代&#xff0c;将硬件设备集中在云端&#xff0c;降低个人用户的硬件消耗&#xff0c;同时提升性能&#xff0c;这一点单单就…

2024牛客寒假算法基础集训营1

A 找dfs这三个字符即可 #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \nusing namespace std;typedef pair<int, int> PII; typedef long long ll;const int N 55;int n; char s[N];void solve() {cin >…