用i18next使你的应用国际化-React

ref: https://www.i18next.com/

i18next是一个用JavaScript编写的国际化框架。

i18next为您提供了一个完整的解决方案，本地化您的产品从web端到移动端和桌面端。

在react项目中安i18next依赖：

  • i18next
  • react-i18next
  • i18next-browser-languagedetector，用于检测用户语言
npm install i18next react-i18next i18next-browser-languagedetector

创建i18n.js文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';i18n.use(LanguageDetector) // 检测用户语言.use(initReactI18next) // 将i18n实例传递给react-i18next.init({ // 初始化 i18nextdebug: true,fallbackLng: 'en',interpolation: {escapeValue: false, // React已经转义了},resources: {en: {translation: {// 此处放置翻译内容description: {part1: 'Edit <1>src/App.js</1> and save to reload.',part2: 'Learn React'}}},de: {translation: {description: {part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',part2: 'Lerne React'}}}}});export default i18n;

在index.js中导入i18n.js：

React>=18.0.0的版本：

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';// 导入 i18n (需要绑定)
import './i18n';const root = createRoot(document.getElementById('root'))
root.render(<React.StrictMode><App /></React.StrictMode>
);

更早的版本：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';// 导入 i18n (需要绑定)
import './i18n';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

使用：在第一个文本中使用了Trans组件，在第二个文本中使用了useTranslation (hook) :

// App.js
import logo from './logo.svg';
import './App.css';
import { useTranslation, Trans } from 'react-i18next';function App() {const { t } = useTranslation();return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p><Trans i18nKey="description.part1">Edit <code>src/App.js</code> and save to reload.</Trans></p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">{t('description.part2')}</a></header></div>);
}export default App;

语言切换器

// App.jsx
...const lngs = {en: { nativeName: 'English' },de: { nativeName: 'Deutsch' }
};function App() {
...<img src={logo} className="App-logo" alt="logo" /><div>{Object.keys(lngs).map((lng) => (<button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => i18n.changeLanguage(lng)}>{lngs[lng].nativeName}</button>))}</div><p><Trans i18nKey="description.part1">Edit <code>src/App.js</code> and save to reload.</Trans></p>
...
}

react language switcher

自i18next v21以来，i18next. resolvedlanguage被设置为当前解析的语言，并且可以用作主要使用的语言，上例中有使用。

i18next.language vs. i18next.languages
i18next.language;
// 设置为当前检测或设置的语言i18next.languages;
// 设置为将用于查找翻译值的语言代码数组
// 设置语言后，将使用新的语言代码填充此数组
// 除非被覆盖，否则将使用该代码的不太特定的版本填充此数组，以用于回退目的，然后是回退语言列表// 初始化回退语言
i18next.init({fallbackLng: ["es", "fr", "en-US", "dev"]
});
// 改变语言
i18next.changeLanguage("en-US-xx");
// 新语言和它的更一般的形式，然后是回退
i18next.languages; // ["en-US-xx", "en-US", "en", "es", "fr", "dev"]
// 再次改变语言
i18next.changeLanguage("de-DE");
// 不保留上一次设置的语言
i18next.languages; // ["de-DE", "de", "es", "fr", "en-US", "dev"]

处理复数和插值

示例：计算语言变化的次数

// App.js
...
import { useState } from 'react';...function App() {...const [count, setCounter] = useState(0);return (...<div>{Object.keys(lngs).map((lng) => (<button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => {i18n.changeLanguage(lng);setCounter(count + 1);}}>{lngs[lng].nativeName}</button>))}</div><p><i>{t('counter', { count })}</i></p>...);
}export default App;

拓展翻译源：

// i18n.js
......resources: {en: {translation: {description: {part1: 'Edit <1>src/App.js</1> and save to reload.',part2: 'Learn React'},counter_one: 'Changed language just once',counter_other: 'Changed language already {{count}} times'}},de: {translation: {description: {part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',part2: 'Lerne React'},counter_one: 'Die Sprache wurde erst ein mal gewechselt',counter_other: 'Die Sprache wurde {{count}} mal gewechselt'}}}...

i18next会根据count数值选择正确的复数格式，了解更多 - Plurals

react pluralization

处理多种复数：

// 翻译源:
{"key_zero": "zero","key_one": "singular","key_two": "two","key_few": "few","key_many": "many","key_other": "other"
}// 使用:
t('key', {count: 0}); // -> "zero"
t('key', {count: 1}); // -> "singular"
t('key', {count: 2}); // -> "two"
t('key', {count: 3}); // -> "few"
t('key', {count: 4}); // -> "few"
t('key', {count: 5}); // -> "few"
t('key', {count: 11}); // -> "many"
t('key', {count: 99}); // -> "many"
t('key', {count: 100}); // -> "other"

这些复数是用Intl API简化的。你可能需要Polyfill Intl.PluralRules的API，如果它不可用，它将退回到i18next JSON格式v3复数处理。

注：变量名必须是count并且必须存在：i18next.t('key', {count: 1});

polyfill： 只需导入它以确保Intl.PluralRules在您的环境中可用:

npm install intl-pluralrules

import 'intl-pluralrules'

如果Intl.PluralRules已经存在，包含一个selectRange()方法，并且支持多种语言环境，那么将不会加载polyfill。

格式化

在i18next和Luxon的帮助下使用不同的日期格式来处理日期和时间。

npm install luxon

创建一个Footer组件并在App.js中引用：

import './Footer.css';const Footer = ({ t }) => (<div className="Footer"><div>{t('footer.date', { date: new Date() })}</div></div>
);export default Footer;// 在App.js中引入并这样使用
// <Footer t={t} />

导入luxon并定义一个格式函数，如文档中所述，并添加新的翻译key:

...
import { DateTime } from 'luxon';....init({debug: true,fallbackLng: 'en',interpolation: {escapeValue: false,// format: (value, format, lng) => { // 遗留使用方法//   if (value instanceof Date) {//     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])//   }//   return value;// }},resources: {en: {translation: {...footer: {date: 'Today is {{date, DATE_HUGE}}'}}},de: {translation: {...footer: {date: 'Heute ist {{date, DATE_HUGE}}'}}}}});// 新的使用方法
i18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});export default i18n;

English：

react english

German：

react german

Context

基于当前时间的特定问候信息，即早上、晚上等。

创建一个getGreetingTime函数，并使用结果作为页脚翻译的内容:

// Footer.jsx
import { DateTime } from 'luxon';
import './Footer.css';const getGreetingTime = (d = DateTime.now()) => {const split_afternoon = 12; // 24小时制分配下午const split_evening = 17; // 24小时制分配晚上const currentHour = parseFloat(d.toFormat('hh'));if (currentHour >= split_afternoon && currentHour <= split_evening) {return 'afternoon';} else if (currentHour >= split_evening) {return 'evening';}return 'morning';
}const Footer = ({ t }) => (<div className="Footer"><div>{t('footer.date', { date: new Date(), context: getGreetingTime() })}</div></div>
);export default Footer;

添加i18next-http-backend插件（从服务器加载翻译）和翻译key:

npm install i18next-http-backend

...
import Backend from 'i18next-http-backend';i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({...resources: {en: {translation: {...footer: {date: 'Today is {{date, DATE_HUGE}}',date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!',date_afternoon: 'Good afternoon! It\'s {{date, DATE_HUGE}}',date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}'}}},de: {translation: {...footer: {date: 'Heute ist {{date, DATE_HUGE}}',date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | Wünsche einen schönen Tag!',date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}',date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}'}}}}});...

效果：

react translations

分离翻译和代码

在i18next-http-backend的帮助下将翻译从代码中分离出来，并将它们放在专用的json文件中。

将翻译文件移动到public文件夹：

public locales

移除翻译代码：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import { DateTime } from 'luxon';i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({debug: true,fallbackLng: 'en',interpolation: {escapeValue: false,// format: (value, format, lng) => {//   if (value instanceof Date) {//     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])//   }//   return value;// }}});i18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});export default i18n;

现在翻译是异步加载的啦，所以用一个Subspense组件包装你的应用来确保你防止以下错误:

Uncaught Error: App suspended while rendering, but no fallback UI was specified.

// App.jsx
import { Suspense } from 'react';function App() {...
}// 在这里，app从页面捕获suspense，以防翻译未加载完成
export default function WrappedApp() {return (<Suspense fallback="...is loading"><App /></Suspense>);
}

如果你想支持一种新的语言，你只需要创建一个新的文件夹和一个新的翻译json文件。这使您可以直接将翻译json发送给一些专业的翻译人员。或者，如果您正在使用翻译管理系统，您可以使用cli同步文件。

具体代码可在这里查看。

多个namespaces

将翻译拆分为多个文件，使用：在调用useTranslation时指定它

const { t } = useTranslation(['translation', 'common']);
// ...
// t('look.deep', { ns: 'common' })

[withTranslation](withTranslation (HOC) - react-i18next documentation)：

withTranslation(['translation', 'common'])(MyComponent);
// ...
// t('look.deep', { ns: 'common' })

[Translation](Translation (render prop) - react-i18next documentation)：

<Translation ns={['translation', 'common']}>
{(t) => <p>{t('look.deep', { ns: 'common' })}</p>
}
</Translation>

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

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

相关文章

Spring（二）：更简单的存储与读取 Bean

Spring（二）：更简单的存储与读取 Bean

通过上一章的Spring&#xff0c;我们基本实现了Spring 的读取与存储&#xff0c;但是在操作过程中&#xff0c;读取与存储并没有那么得“简单” 一套流程还是很复杂&#xff0c;所以&#xff0c;本章来介绍更加简单得读取与存储。 在 Spring 中想要更简单的存储和读取对象的核…
阅读更多...
mysql通过binlog恢复数据

mysql通过binlog恢复数据

开启binlog 在my.ini中添加以下两行代码&#xff1a; log-binmysql-binserver-id1 注意要写在[mysqld]范围内才会生效 查看binlog存放日志文件目录 show variables like %datadir%; 查看binlog文件名 show master logs; 将binlog转换成sql mysqlbinlog --no-defaults --bas…
阅读更多...
【LeetCode热题100】打卡第42天：滑动窗口最大值搜索二维矩阵II

【LeetCode热题100】打卡第42天：滑动窗口最大值搜索二维矩阵II

文章目录 【LeetCode热题100】打卡第42天&#xff1a;滑动窗口最大值&搜索二维矩阵II⛅前言 滑动窗口最大值&#x1f512;题目&#x1f511;题解 搜索二维矩阵II&#x1f512;题目&#x1f511;题解 【LeetCode热题100】打卡第42天&#xff1a;滑动窗口最大值&搜索二维…
阅读更多...
SpringMVC程序开发

SpringMVC程序开发

1.什么是Spring MVC? Spring Web MVC是基于Servlet API构建的原始的Web框架&#xff0c;从一开始是就包含在Spring框架中。它的正式名称“Spring Web MVC"来自其源模板的名称&#xff08;Spring-webmvc)&#xff0c;但通常被称为“Spring MVC" 从上述的定义我们可…
阅读更多...
[visionOS][Apple Vision Pro] 缩放3D模型

[visionOS][Apple Vision Pro] 缩放3D模型

方法一&#xff1a;通过代码来设置Model3D Model3D(named:"你的3D模型名称",bundle:realityKitContentBundle).padding(.bottom,50).scaleEffect(0.2) //这句用来缩放 方式二&#xff1a;别人可以&#xff0c;我验证过不行的方法 RealityKitContent工具中&#xf…
阅读更多...
PLC-Recorder的高速采集有多快？0.5ms算快吗？看控制器能力了！

PLC-Recorder的高速采集有多快？0.5ms算快吗？看控制器能力了！

大家知道&#xff0c;PLC-Recorder有一个高速采集的功能&#xff0c;基于TCP连接或UDP报文&#xff0c;速度取决于发送端的能力。对于西门子PLC&#xff0c;能做到1-2ms的采集速度&#xff0c;但是&#xff0c;我在前面的文章里提到了0.5ms的高速采集&#xff0c;哪个控制器能这…
阅读更多...
Linux 下 nc 发送接收 udp、tcp数据

Linux 下 nc 发送接收 udp、tcp数据

nc&#xff0c;全名叫 netcat&#xff0c;它可以用来完成很多的网络功能&#xff0c;譬如端口扫描、建立TCP/UDP连接&#xff0c;数据传输、网络调试等等&#xff0c;因此&#xff0c;它也常被称为网络工具的 瑞士军刀 。 一、只服务端使用nc 备注&#xff1a;这种方式只能发…
阅读更多...
Django实现音乐网站 ⑴

Django实现音乐网站 ⑴

使用Python Django框架制作一个音乐网站。 目录 网站功能模块 安装django 创建项目 创建应用 注册应用 配置数据库 设置数据库配置 设置pymysql库引用 创建数据库 创建数据表 生成表迁移文件 执行表迁移 后台管理 创建管理员账户 启动服务器 登录网站 配置时区…
阅读更多...
自媒体必备的8个素材网站，视频、音效、图片全部免费下载

自媒体必备的8个素材网站，视频、音效、图片全部免费下载

自媒体必备的视频、音效、图片素材&#xff0c;这8个网站帮你解决。赶紧马住&#xff01; 菜鸟图库 https://www.sucai999.com/video.html?vNTYwNDUx 菜鸟图库虽然是一个设计网站&#xff0c;但它还有非常丰富的视频和音频素材&#xff0c;视频素材全部都是高清无水印&#…
阅读更多...
Java 贪心算法经典问题解决

Java 贪心算法经典问题解决

文章目录 分金条题目思路代码实现测试用例以及结果输出 花费资金做项目最大收益题目思路代码实现测试用例以及结果输出 预定会议室题目思路代码实现测试用例以及结果输出 取中位数题目思路代码实现测试用例以及结果输出 最低字典序题目思路代码实现测试用例以及结果输出 结语 分…
阅读更多...
vite打包性能优化以及填坑

vite打包性能优化以及填坑

目录 前言 项目优化前 分析 优化 拆分包 去除debugger CDN 加速 按需导入 文件压缩 图片压缩 viteImagemin报错 填坑 坑1 坑2 总结 配置 前言 最近在使用 Vite4.0 构建一个中型前端项目的过程中&#xff0c;遇到了一些坑&#xff0c;也做了一些项目在构建生产环…
阅读更多...
C进阶：文件操作

C进阶：文件操作

C语言文件操作 什么是文件 磁盘上的数据是文件。 但是在程序设计中&#xff0c;我们一般谈的文件有两种&#xff1a;程序文件&#xff08;例如.c,.h这一类编译&#xff0c;链接过程中的文件&#xff09;&#xff0c;数据文件。 程序文件 包括源程序文件&#xff08;后缀为.c&…
阅读更多...
重生之我要学C++第四天

重生之我要学C++第四天

这篇文章的主要内容是类的默认成员函数。如果对大家有用的话&#xff0c;希望大家三连支持&#xff0c;博主会继续努力&#xff01; 目录 一.类的默认成员函数 二.构造函数 三.析构函数 四.拷贝构造函数 五.运算符重载 一.类的默认成员函数 如果一个类中什么成员都没有&…
阅读更多...
JavaWeb 速通HTTP

JavaWeb 速通HTTP

目录 一、HTTP快速入门 1.HTTP简介 : 2.HTTP请求头 : 3.HTTP响应头 : 二、HTTP响应状态码 1.基本介绍 : 2.常见状态码 : 3.状态码的分类 : 4.完整状态码汇总 : 三、HTTP请求包和响应包 1.请求包分析 : 1 GET请求 (1) 说明 (2) doGet返回数据给浏览器 (3) form表单提…
阅读更多...
Hadoop生态体系-2

Hadoop生态体系-2

目录标题 1、MapReduce介绍2、数据仓库3、HIVE4、HQL4.1 hive读写文件机制4.2 Hive数据存储路径 1、MapReduce介绍 思想&#xff1a;分而治之 map:“分”&#xff0c;即把复杂的任务分解为若干个“简单的任务”来处理。可以进行拆分的前提是这些小任务可以并行计算&#xff0c…
阅读更多...
C++ 函数重载

C++ 函数重载

1.函数重载的概念 在C中可以为两个或两个以上的函数提供相同的函数名称&#xff0c;只要参数类型不同&#xff0c;或参数类型相同而参数个数不同&#xff0c;称为函数重载。 在C语言中实现int&#xff0c;char&#xff0c;double类型的比较大小函数&#xff1a; int my_max_…
阅读更多...
【Kubernetes资源篇】ingress-nginx最佳实践详解

【Kubernetes资源篇】ingress-nginx最佳实践详解

文章目录 一、Ingress Controller理论知识1、Ingress Controller、Ingress简介2、四层代理与七层代理的区别3、Ingress Controller中封装Nginx&#xff0c;为什么不直接用Nginx呢&#xff1f;4、Ingress Controller代理K8S内部Pod流程 二、实践&#xff1a;部署Ingress Control…
阅读更多...
STM32 串口实验（学习一）

STM32 串口实验（学习一）

本章将实现如下功能&#xff1a;STM32通过串口和上位机对话&#xff0c;STM32在收到上位机发过来的字符串后&#xff0c;原原本本返回给上位机。 STM32 串口简介 串口作为MCU的重要外部接口&#xff0c;同时也是软件开发重要的调试手段&#xff0c;其重要性不言而喻。现在基本…
阅读更多...
KMP算法的及其原理

KMP算法的及其原理

KMP算法 首先 我们先了解一下 KMP算法的作用 str1 和str2 字符串 如果str1中包含str2 那么返回头位置 如果不包含返回-1 首先 我们先加入一个概念: 有一个next数组 next[i]的值为 str2 中 以i-1位置为结尾的字符串中 最长相同前缀后缀为多长(相同前缀后缀 不是对称 aba 中相…
阅读更多...
uniapp 小程序如何从主包页面跳转到分包页面

uniapp 小程序如何从主包页面跳转到分包页面

在uniapp开发小程序的时候&#xff0c;“分包”概念一定要提前了解下&#xff0c;具体我就不多说了&#xff0c;自己看下关网的相关配置。 那么&#xff0c;如果从主包页面&#xff0c;跳转至分包的页面呢&#xff1f;如图所示 我的页面->详情页 在我的页面创建好自己的链…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023