在上一篇i18n多国语言Internationalization的实现-CSDN博客,可能会遇到一个问题,我们在进行英文或中文切换时,并没有办法对当前的数据进行动态的更新。指的是什么意思呢?当前app.js当中一个组件内容,其中包含了一个 “msg” 的信息,我们能否将这个信息内容动态的替
换到我们 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 值动态更新呢
}
}
cn下的translation内容为:
{
"main":{
"header":"欢迎使用应用",
"new_message_one": "你有新消息",
"new_message_other": "你有 {{count}} 条新消息" //如何对 count 值动态更新呢
}
}
(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 条新消息 内容
我们可以看到仅仅设置的是 "new_message",也就是 translation.json 中的 "new_message"这是一个前缀,可以设置"_one" 为 1,"_other" 其他的,这是后缀信息
在进行语言转换的时候,并不需要进行一个设置,我们可以实现一个动态的转换,除了 1 之外,其他的都是 other ,那么,现在,我们就实现了一个动态值的替换操作。
除此之外,我们还应该对多国语言做什么样的操作处理呢?
之前就已经提及多国语言中的日期显示,每个国家并不相同:假如是英国,美国,欧洲等国家我们的日期应该显示的是什么格式,而对于中国,我们的日期又应该显示的是什么格式
这时候会产生一个时间的概念,并且我们还需要对其进行一个本地时间的转换处理
那么这时候需要了解一个第三方的模块内容,这个模块内容为 Luxon?
Luxon 是一个现代的、专为浏览器和 Node.js 环境设计的时间日期库,它基于Intl.DateTimeFormat 和 Temporal API构建。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>
查看时,可以确认是哪个他:
因此,我们可以对动态的内容进行前缀的设置,还可以对时间进行本地化的操作处理