i18n多国语言Internationalization的动态实现

一、数据动态的更新

在上一篇i18n多国语言Internationalization的实现-CSDN博客,可能会遇到一个问题,我们在进行英文或中文切换时,并没有办法对当前的数据进行动态的更新。指的是什么意思呢?当前app.js当中一个组件内容,其中包含了一个 “msg” 的信息,我们能否将这个信息内容动态的替

换到我们 translation.json 配置文件当中呢?

1. 我们可以进行对应的尝试,比如说在 en(英文)这个语言 translation.json 当中,去设置一个信息:

en下的translation内容为:

{"main":{"header":"Welcome to the App","new_message_one": "You have one nwe message","new_message_other": "You have {{count}} new messages" //如何对 count 值动态更新呢}
}

2. 当然除了英文的版本,我们还需要进行对应的中文内容的一个设置:

cn下的translation内容为:

{"main":{"header":"欢迎使用应用","new_message_one": "你有新消息","new_message_other": "你有 {{count}} 条新消息" //如何对 count 值动态更新呢}
}

3. 当设置完之后,回到 App.jsx 当中:

(1)先进行 useState 钩子的引入

import { Suspense, useState } from "react";

(2)然后准备 message 状态值设置

const [messages, setMessages] = useState(0);

(3)设置一个button 按钮

<button onClick={() => setMessages(message + 1)}>count++</button>

(4)利用的是用的是useTranslation方法进行message的一个显示

将命名空间下面的 new_message_one 进行相应的渲染显示,以及new_message_other的显示,我们可以显示new_message这个信息,然后去传递动态的数据内容

<p>{t("new_message", { count: messages })}</p>

(5)现在,则可以查看在英文版本下面

你会看到一个 count++ 按钮以及 You have 0 new messages

  

点击 count++ 按钮后,会看到 You have one new messages

再点击 count++,会看到 You have 2 new messages

此时我们切换到 中文 之后,会看到 你有 2 条新消息 内容

4. 在 App.jsx 组件当中,我们进行 Translation 转换,使他的参数信息是如何的呢?

我们可以看到仅仅设置的是 "new_message",也就是 translation.json 中的 "new_message"这是一个前缀,可以设置"_one" 为 1,"_other" 其他的,这是后缀信息

在进行语言转换的时候,并不需要进行一个设置,我们可以实现一个动态的转换,除了 1 之外,其他的都是 other ,那么,现在,我们就实现了一个动态值的替换操作。

二、多国语言中的日期显示

除此之外,我们还应该对多国语言做什么样的操作处理呢?

之前就已经提及多国语言中的日期显示,每个国家并不相同:假如是英国,美国,欧洲等国家我们的日期应该显示的是什么格式,而对于中国,我们的日期又应该显示的是什么格式

这时候会产生一个时间的概念,并且我们还需要对其进行一个本地时间的转换处理

Luxon :

那么这时候需要了解一个第三方的模块内容,这个模块内容为 Luxon 

Luxon 是一个现代的、专为浏览器和 Node.js 环境设计的时间日期库,它基于Intl.DateTimeFormat 和 Temporal API构建。Luxon 提供了处理、解析、格式化和比较日期时间的强大功能,并且特别关注性能和可维护性

  • 日期时间创建与操作:包括了轻松创建、调整、计算日期的时间对象
  • 解析和格式化:还可以实现解析和格式化,根据字符串或者是不同的格式解析日期和时间,并且将日期的时间和格式再转换为字符串的形式
  • 时区支持:还能实现时区的支持,可以进行时区的转换和处理时区的相关的日期时间问题
  • 人性化API:可以提供诸如 true 和 mat 的方法,用于生成相对时间表达式。比如说:5分钟之前、10分钟之前,自定义格式的输出
  • 优化性能:之前也提出 Luxon 特别关注性能和可维护性,尤其是对大量的日期时间操作

使用 Luxon 进行对应功能的实现:

(1)下载 luxon:

npm install luxon

(2)在 en(英文) translation.json 配置文件当中进行时间的设置

"current_date": "Today is {{date,DATE_LONG}}"

(3)在 cn(中文) translation.json 配置文件当中进行时间的设置

"current_date": "今天是 {{date,DATE_LONG}}"

(4)在 i18n.jsx 进行修改

import cnJSON from './locales/cn/translation.json'; //引入cn下的translation.json
import enJSON from './locales/en/translation.json'; //引入en下的translation.json
import i18n from 'i18next'; //在i18next下引入i18n
import { initReactI18next } from 'react-i18next'; //从react-i18next中引入initReactI18next方法
import { DateTime } from "luxon";//定义resources资源的边栏
const resources = {en:{...enJSON},cn:{...cnJSON}, //将这两个对象进行展开
}//利用i18n进行一个插件的使用,使用的则是initReactI18next,利用init进行国际化内容的转换操作
i18n.use(initReactI18next).init({resources,  //可以设置resources资源内容debug:true,fallbackLng:"cn", //进行调试操作,英文的(en)
}) i18n.changeLanguage("en"); //即使fallbackLng设置为中文语言,但是随后我们又使用了changeLanguage将其设置为了en,所以页面显示的是英文。// i18n 的日期转换操作
i18n.services.formatter.add("DATE_LONG", (value, lng) => {return DateTime.fromJSDate(value).setLocale(ing).toLocaleString(DateTime.DATE_HUGE);
});//暴露
export default i18n;

(5)渲染显示

<p>{t("current_date", { date: new Date() })}</p>

(6)查看

如是中文时:

如是英文时:

三、对动态数据更为丰富的功能操作

(1)在 en(英文) translation.json 配置文件设置基本信息

"incoming_message": "You have a new message from {{from}}",
"message_contents": "They say:{{body}}",
"message_contents_male": "He says:{{body}}",  // 男性
"message_contents_female": "She says:{{body}}"  // 女性

(2)在 cn(中文) translation.json 配置文件设置基本信息

"incoming_message": "你有一条信息来自 {{from}}",
"message_contents": "他们说:{{body}}",
"message_contents_male": "他说:{{body}}",
"message_contents_female": "她说:{{body}}"

(3)在 App.jsx 中,进行信息展示(通过是否设置上下文,实现对应的信息展示)

如:上下文不进行设置时:

<p>{t("incoming_message", { from: "John" })}</p>
<p>{t("message_contents", {body: "How are you donging?"
})}
</p>

查看时,无法区分男性他 ;还是女性她:

如:上下文进行设置:

<p>{t("incoming_message", { from: "John" })}</p>
<p>{t("message_contents", {body: "How are you donging?",context: "male"  //上下文信息内容
})}
</p>

查看时,可以确认是哪个他:

切换为英文时:

因此,我们可以对动态的内容进行前缀的设置,还可以对时间进行本地化的操作处理

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

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

相关文章

Go语言学习笔记:基础语法和类型

Go语言学习笔记&#xff1a;基础语法和类型 目录 Go语言学习笔记&#xff1a;基础语法和类型学习路线前言变量声明常量数据类型布尔型&#xff08;Boolean&#xff09;整型&#xff08;Integer&#xff09;浮点型&#xff08;Floating point&#xff09;复数型&#xff08;Comp…

LeetCode.2765. 最长交替子数组

题目 2765. 最长交替子数组 分析 为了得到数组 nums 中的最长交替子数组的长度&#xff0c;需要分别计算以每个下标结尾的最长交替子数组的长度。为了方便处理&#xff0c;计算过程中需要考虑长度等于 1 的最长交替子数组&#xff0c;再返回结果时判断最长交替子数组的长度…

【代码整理】COCO格式数据集画框

可以用于排查数据集转化后可能出现的坐标错误&#xff0c;类别不对齐等需要可视化才能发现的问题 import部分 from pycocotools.coco import COCO import numpy as np import os from PIL import Image from matplotlib.collections import PatchCollection from matplotlib.…

详细分析Java中的Date类以及格式转换

目录 前言1. 基本知识2. 格式化输出3. 格式转换 前言 记录这篇文章的缘由&#xff0c;主要是涉及一个格式转换&#xff0c;对此深挖了这个类 在Java中&#xff0c;Date类是用于表示日期和时间的类。 位于java.util包中&#xff0c;是Java平台中处理日期和时间的基本类之一。…

路由器结构

路由器是连接互联网的设备&#xff0c;本文主要描述路由器的结构组成。 如上所示&#xff0c;OSI&#xff08;Open System Interconnect&#xff09;开放系统互联参考模型是互联网架构的标准协议栈&#xff0c;由ISO标准组织制定。自底向上&#xff0c;互联网架构分为7层&#…

服务器与Ajax

1.初识Ajax Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 术语ajax最早产生于2005年&#xff0c;Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)&#xff0c;但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技…

从零开始:Ubuntu Server中MySQL 8.0的安装与Django数据库配置详解

Ubuntu系统纯净安装MySQL8.0 1、安装Mysql8.0 sudo apt install mysql-server2、检查MySQL状态 sudo systemctl status mysql如下所示看见Active: active (running)说明mysql状态正常 ● mysql.service - MySQL Community ServerLoaded: loaded (/lib/systemd/system/mysql…

Docker镜像操作

镜像名称 镜名称一般分两部分组成&#xff1a;[repository]:[tag]。 在没有指定tag时&#xff0c;默认是latest&#xff0c;代表最新版本的镜像。 这里的mysql就是repository&#xff0c;5.7就是tag&#xff0c;合一起就是镜像名称&#xff0c;代表5.7版本的MySQL镜像。 镜像…

svn checkout 无法使用,没有响应 svn: E170013

在linux mint 下使用 svn&#xff0c; 配合vscode SVN 插件。 一直没出现过问题。 这次在 Mac mini 上使用就是一直链接&#xff0c;最后超时 time out 。 当然ping ip 也是超时。 svn: E170013: Unable to connect to a repository at URL svn://192.168.0.220/project svn…

YOLOv8改进 | 损失函数篇 | QualityFocalLoss质量焦点损失(含代码 + 详细修改教程)

一、本文介绍 本文给大家带来的改进机制是QualityFocalLoss,其是一种CLS分类损失函数,它的主要创新是将目标的定位质量(如边界框与真实对象的重叠度量,例如IoU得分)直接融合到分类损失中,形成一个联合表示。这种方法能够解决传统目标检测中分类与定位任务之间存在的不一…

计算机网络(第六版)复习提纲7

SS2.4 信道复用技术&#xff08;填空简答&#xff09; 1.信道复用概念&#xff1a; a)复用&#xff1a;允许用户使用一个共享信道进行通信&#xff0c;发送方复用&#xff08;多合一&#xff09;&#xff0c;接收方分用&#xff08;一分多&#xff09; 2.频分复用FDM&#xff1…

js组合继承例子和优缺点

JavaScript中的组合继承是一种将原型链继承和拷贝继承结合起来实现继承的方式。它通过拷贝继承将父类的属性和方法复制到子类中&#xff0c;并利用原型链继承实现多态性和继承链。 下面是一个组合继承的例子&#xff1a; function Parent() { this.name Parent; } Parent.…

Sentinel限流规则支持流控效果

流控效果是指请求达到流控阈值时应该采取的措施&#xff0c;包括三种&#xff1a; 1.快速失败&#xff1a;达到阈值后&#xff0c;新的请求会被立即拒绝并抛出FlowException异常。是默认的处理方式。 2.warm up&#xff1a;预热模式&#xff0c;对超出阈值的请求同样是拒绝并抛…

flink1.18 广播流 The Broadcast State Pattern 官方案例scala版本

对应官网 https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance/broadcast_state/ 测试数据 * 广播流 官方案例 scala版本* 广播状态* https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance…

css初始化(不应该固定)

1&#xff09;对边框 margin:0padding:0 2)图片去边框 这个得看浏览器了&#xff0c;有的浏览器是带边框的 img {border:none;} 3)清除 ul ol 前的小点 ul,ol {list-style:none; } 4)input input {padding-top:0;padding-bottom:0;boder:none; } 5) 去掉a标签的下滑线…

风二西CTF流量题大集合-刷题笔记|NSSCTF流量题(1)

2.[鹤城杯 2021]流量分析 flag{w1reshARK_ez_1sntit} 3.[CISCN 2023 初赛]被加密的生产流量 c1f_fi1g_1000 4.[GKCTF 2021]签到 flag{Welc0me_GkC4F_m1siCCCCCC!} 5.[闽盾杯 2021]Modbus的秘密 flag{HeiDun_2021_JingSai} 6.[LitCTF 2023]easy_shark 7.[CISCN 2022 初赛]ez…

opencv#29 图像噪声的产生

在上一节的图像卷积我们了解到图像卷积可以用于去除图像中的噪声&#xff0c;那么对于现实生活中每一张采集到的图像都会包含噪声&#xff0c;也就是我们通过相机无法得到不包含噪声的图像&#xff0c;如果我想衡量噪声去除能力的强弱&#xff0c;就必须在一张不含噪声的图像中…

瑞_力扣LeetCode_104. 二叉树的最大深度

文章目录 题目 104. 二叉树的最大深度题解后序遍历 递归实现后序遍历 迭代实现层序遍历 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《刷题》的力扣LeetCode系列&#xff0c;主要以力扣LeetCode网的题进行解析与分享。本文仅供大家交流、学习及研究使用&#xff0c;禁…

【NVIDIA】Jetson Orin Nano系列:Qt+Gstreamer(01)pro中配置gstreamer库和头文件路径

1、安装头文件和库 本人烧写的Ubuntu22.0版本,文件系统已有相关头文件,如果没有可以使用下面的命令安装 sudo apt install libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libgstreamer-plugins-good1.0-dev2、pro配置头文件路径和库 QT += core gui greate…

多个coco数据标注文件合并

一、coco数据集是什么&#xff1f; COCO&#xff08;Common Objects in Context&#xff09;是一个用于目标检测和图像分割任务的标注格式。如果你有多个COCO格式的JSON文件&#xff0c;你可能需要将它们合并成一个文件&#xff0c;以便更方便地处理和管理数据。在这篇博客中&…