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

目录

查看并设置语言

单页面:html lang

​编辑

浏览器

自定义翻译:react-i18next

设置

模块: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>

浏览器

自定义翻译:react-i18next

设置

模块: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.mzph.cn/news/668673.shtml

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

相关文章

移动端基础-vw适配

什么是vw 相对单位 相对视口的尺寸 vw:viewport width 换算 1vw1/100视口宽度 vw不需要向rem一样检查视口宽度 若视口宽为375px 1vw3.75px vw与vmin的区别 vmin更照顾横竖屏问题 1vw是视口宽度的100%&#xff0c;而vmin是找宽度和高度中最小的那个&#xff0c;这样横屏…

RFID快递物流包装仓储管理与追踪解决方案

RFID技术在快递物流、包装和仓储管理领域有着广泛的应用&#xff0c;通过为每个货物、托盘、周转箱、围板箱等物品添加RFID标签&#xff0c;为它们赋予独特的身份识别码&#xff0c;并通过RFID读写器在各个仓储业务节点进行管理和追踪&#xff0c;RFID技术具有远距离快速识别的…

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…

python中的web框架介绍

目录 一&#xff1a;框架介绍 二&#xff1a;框架安装 Python中有许多流行的Web框架,以下是一些最受欢迎的框架&#xff1a; 一&#xff1a;框架介绍 1: Django Django是一个高级Python Web框架&#xff0c;它鼓励快速开发和干净的设计。Django的主要特点是其强大的ORM&am…

L1-037 A除以B-java

输入样例1&#xff1a; -1 2输出样例1&#xff1a; -1/2-0.50输入样例2&#xff1a; 1 -3输出样例2&#xff1a; 1/(-3)-0.33输入样例3&#xff1a; 5 0输出样例3&#xff1a; 5/0Error java import java.util.*; class Main{public static void main(String[] args){Sc…

马尔科夫链--基础知识

马尔可夫链&#xff08;Markov Chain&#xff09;是一种数学系统&#xff0c;它经过从一个状态到另一个状态的转换&#xff0c;这些转换遵循马尔可夫性质&#xff0c;即未来的状态只依赖于当前的状态&#xff0c;而与过去的状态&#xff08;即如何到达当前状态&#xff09;无关…

力扣 121. 买卖股票的最佳时机

题目来源&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 好久没写代码了&#xff0c;啥啥都忘了 C题解1&#xff1a;贪心算法。&#xff08;来源代码随想录&#xff09; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取…

由亚马逊云科技 Graviton4 驱动的全新内存优化型实例 Amazon EC2 实例(R8g),现已开放预览

下一代 Amazon Elastic Compute CloudAmazon EC2) 实例的预览版现已公开 提供。全新的 R8g 实例 搭载新式 Graviton4 处理器&#xff0c;其性价比远超任何现有的内存优化实例。对于要求较高的内存密集型工作负载&#xff0c;R8g 实例是不二之选&#xff1a;大数据分析、高性能数…

第七届西湖论剑·中国杭州网络安全技能大赛 AI 回声海螺 WP

第七届西湖论剑中国杭州网络安全技能大赛-AI-回声海螺 开题&#xff0c;提示输入密码给FLAG。 这个回声海螺应该是个AI&#xff0c;就是复读机&#xff0c;应该是想办法从中骗出密码。 感觉这题不像是AI&#xff0c;也没用啥模型&#xff0c;应该是WEB。或者是说类似于AI的提示…

【Rust日报】2024-02-02 致力于编程,无论你使用哪种语言

AWS SDK for Rust, 2024 Feb2nd released AWS SDK for the Rust Programming Language 2024年2月最新 Releases&#xff1a; Service Features: aws-sdk-sagemaker (1.20.0): Amazon SageMaker Canvas 现在通过 CanvasAppSettings 参数支持生成式 AI 设置。这允许您在 Canvas 工…

AIGC实战——归一化流模型(Normalizing Flow Model)

AIGC实战——归一化流模型 0. 前言1. 归一化流模型1.1 归一化流模型基本原理1.2 变量变换1.3 雅可比行列式1.4 变量变换方程 2. RealNVP2.1 Two Moons 数据集2.2 耦合层2.3 通过耦合层传递数据2.4 堆叠耦合层2.5 训练 RealNVP 模型 3. RealNVP 模型分析4. 其他归一化流模型4.1 …

小红书种草图文怎么制作?纯干货

一篇优质的小红书种草图文&#xff0c;不仅能提升产品销量&#xff0c;还能为品牌带来广泛的关注。如何制作出高质量的小红书种草图文呢&#xff1f;本文伯乐网络传媒将为你一一揭晓。 一、小红书种草图文制作要点 1. 确定目标受众和主题 明确目标受众是谁&#xff0c;他们有何…

微服务入门篇:Nacos注册中心(Nacos安装,快速入门,多级存储,负载均衡,环境隔离,配置管理,热更新,集群搭建,nginx反向代理)

目录 1.Nacos安装1.官网下载2.解压到本地3.启动nacos 2.Nacos快速入门1.在父工程中导入nacos依赖2.给子项目添加客户端依赖3.修改对应服务的配置文件4.启动服务&#xff0c;查看nacos发现情况 3.Nacos服务多级存储模型4.NacosRule负载均衡5. 服务实例的权重设置6.环境隔离&…

PDF控件Spire.PDF for .NET【安全】演示:检测 PDF 文档是否受密码保护

Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作 PDF 文档。使用 Spire.PDF 类库&#xff0c;开发人员可以新建一个 PDF 文档或者对现有的 PDF 文档进行处理&#xff0c;且无需安装 Adobe Acrobat。 E-iceblue 功能类库Spire 系列文档处…

2024数学建模美赛F题Reducing Illegal Wildlife Trade原创论文讲解(含完整python代码)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了数学建模美赛本次F题目非法野生动物贸易完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 F题论文共42页&…

Qt|实现时间选择小功能

在软件开发过程中&#xff0c;QtDesigner系统给出的控件很多时候都无法满足炫酷的效果&#xff0c;前一段时间需要用Qt实现选择时间的小功能&#xff0c;今天为大家分享一下&#xff01; 首先看一下时间效果吧&#xff01; 如果有需要继续往下看下去哟~ 功能 1&#xff1a;开…

‘javax.sql.DataSource‘ that could not be found的问题

报错信息如下&#xff1a; 2024-02-04 16:31:14.832 WARN 952 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDepen…

Leetcode—38. 外观数列【中等】

2024每日刷题&#xff08;111&#xff09; Leetcode—38. 外观数列 实现代码 class Solution { public:string countAndSay(int n) {string ans "1";while(--n) {string next;for(int i 0; i < ans.size(); i) {int cnt 1;char c ans[i];while(i 1 < an…

【算法与数据结构】647、516、LeetCode回文子串+最长回文子序列

文章目录 一、647、回文子串二、516、最长回文子序列三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、647、回文子串 思路分析&#xff1a;判断一个字符串是否为回文串那么必须确定回文串的所在区间&#xff0c;而一维…

【RK3288 Android6 T8, 突然无声音问题排查】

文章目录 【RK3288 Android6 T8, 突然无声音问题排查】问题描述问题调查patch【RK3288 Android6 T8, 突然无声音问题排查】 问题描述 页面上方突然出现音量进度条,小铃铛图标显示静音状态,不再播报语音 手动去安卓设置内查看,小铃铛音量为0,手动恢复到有声音后继续执行…