详细介绍 React 中 i18n 的完整使用流程:
接下来按照步骤,让我们来完成!
// 1. 首先安装必要的依赖
// npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector// 2. 创建 i18n 配置文件 (src/i18n/index.js)
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next' // react-i18next 的初始化插件
import Backend from 'i18next-http-backend' // 用于动态加载翻译文件
import LanguageDetector from 'i18next-browser-languagedetector' // 用于检测浏览器语言// i18n 初始化配置
i18n// 使用 i18next-http-backend 插件// 这个插件允许我们从服务器动态加载翻译文件.use(Backend)// 使用 i18next-browser-languagedetector 插件// 这个插件会自动检测用户的语言环境.use(LanguageDetector)// 将 i18next 集成到 react 中.use(initReactI18next)// 初始化 i18next.init({// 默认语言fallbackLng: 'en',// 是否在开发环境打印调试信息debug: process.env.NODE_ENV === 'development',// 翻译文件的路径配置backend: {loadPath: '/locales/{{lng}}/{{ns}}.json', // 翻译文件路径模板},// 翻译文件的命名空间ns: ['translation'],defaultNS: 'translation',// 插值配置interpolation: {// 是否转义 HTML 标签escapeValue: false,},// 检测语言的配置detection: {// 存储语言选择的 keylookupLocalStorage: 'i18nextLng',// 缓存用户语言选择caches: ['localStorage'],},})export default i18n// 3. 创建翻译文件
// public/locales/en/translation.json
{"welcome": "Welcome","hello": "Hello, {{name}}!","nav": {"home": "Home","about": "About","contact": "Contact"},"form": {"username": "Username","password": "Password","submit": "Submit"}
}// public/locales/zh/translation.json
{"welcome": "欢迎","hello": "你好,{{name}}!","nav": {"home": "首页","about": "关于","contact": "联系"},"form": {"username": "用户名","password": "密码","submit": "提交"}
}// 4. 在 App.js 中配置 i18n
import React from 'react'
import { I18nextProvider } from 'react-i18next'
import i18n from './i18n'function App() {return (// 使用 I18nextProvider 包裹应用<I18nextProvider i18n={i18n}><YourApp /></I18nextProvider>)
}// 5. 在组件中使用 i18n
import React from 'react'
import { useTranslation } from 'react-i18next' // 引入 useTranslation hookfunction MyComponent() {// 解构 t 函数和 i18n 实例const { t, i18n } = useTranslation()// 切换语言的函数const changeLanguage = (lng) => {i18n.changeLanguage(lng)}return (<div>{/* 基本翻译 */}<h1>{t('welcome')}</h1>{/* 带变量的翻译 */}<p>{t('hello', { name: 'John' })}</p>{/* 嵌套的翻译 */}<nav><a href="/">{t('nav.home')}</a><a href="/about">{t('nav.about')}</a><a href="/contact">{t('nav.contact')}</a></nav>{/* 语言切换按钮 */}<div><button onClick={() => changeLanguage('en')}>English</button><button onClick={() => changeLanguage('zh')}>中文</button></div>{/* 表单示例 */}<form><div><label>{t('form.username')}</label><input type="text" /></div><div><label>{t('form.password')}</label><input type="password" /></div><button type="submit">{t('form.submit')}</button></form></div>)
}// 6. 高级用法示例// 6.1 使用 Trans 组件处理复杂的 HTML
import { Trans } from 'react-i18next'function ComplexComponent() {return (<Trans i18nKey="description">This is a <strong>bold</strong> text with <a href="/">link</a>.</Trans>)
}// 6.2 使用 HOC 包装组件
import { withTranslation } from 'react-i18next'class MyClassComponent extends React.Component {render() {const { t } = this.propsreturn <h1>{t('welcome')}</h1>}
}export default withTranslation()(MyClassComponent)// 6.3 懒加载翻译文件
const loadLocales = (language) => {return import(`./locales/${language}.json`).then((module) => module.default)
}// 6.4 处理复数
// translation.json
{"items": {"zero": "没有项目","one": "1个项目","other": "{{count}}个项目"}
}// 使用
function PluralExample() {const { t } = useTranslation()return <p>{t('items', { count: 2 })}</p>
}
相关文章:
详细介绍 React 中 i18n 的完整使用流程:
接下来按照步骤,让我们来完成! // 1. 首先安装必要的依赖 // npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector// 2. 创建 i18n 配置文件 (src/i18n/index.js) import i18n from i18next import { initReactI…...
部署:上传项目代码 配置数据库
一、上传代码 1、使用git 可以使用Git Clone。使用前,在服务器上也要创建秘钥对。这里的密钥对,是专门用来读取Git仓库的。 在宝塔上,点击终端。进来后,运行 ssh-keygen还是一路回车,密钥对就建好了。 接着用命令…...
C++—9、如何在Microsoft Visual Studio中调试C++
本文通过实例操作来介绍 Visual Studio 调试器的功能。调试器在运行过程中可提供许多方法让你查看代码的情况。 你可以逐步浏览代码、查看变量中存储的值、设置对变量的监视以查看值何时改变、检查代码的执行路径、查看代码分支是否正在运行等等。本实例主要是设置断点及查看内…...
11. C 语言 作用域与变量使用技巧
本章目录: 前言一、作用域的分类局部变量示例: 全局变量示例:示例: 形式参数示例: 二、作用域的细节与常见误区块级作用域示例: 静态变量与全局变量的对比示例: 未初始化变量的影响示例: 三、实…...
【机器学习案列】学生抑郁可视化及预测分析
🧑 博主简介:曾任某智慧城市类企业算法总监,目前在美国市场的物流公司从事高级算法工程师一职,深耕人工智能领域,精通python数据挖掘、可视化、机器学习等,发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...
Perl语言的循环实现
Perl语言的循环实现 引言 Perl是一种强大的脚本语言,以其灵活的语法和强大的文本处理能力著称。无论是在系统管理、网络编程,还是在Web应用开发中,Perl都广泛应用于各种领域。循环是编程语言中一个极其重要的概念,它允许程序重复…...
SpringBoot项目——使用Spark对爬虫爬取下的数据进行清洗
随着互联网信息呈爆炸式增长,爬虫技术被广泛用于从海量网页中抓取有价值的数据。然而,爬取到的数据往往存在格式不规范、重复、噪声等诸多问题,需要高效的数据清洗流程来保障数据质量,Spark 在其中发挥了关键作用。 什么是Spark …...
分布式锁 Redis vs etcd
为什么要实现分布式锁?为什么需要分布式锁,分布式锁的作用是什么,哪些场景会使用到分布式锁?分布式锁的实现方式有哪些分布式锁的核心原理是什么 如何实现分布式锁redis(自旋锁版本)etcd 的分布式锁(互斥锁(信号控制)版本) 分布式锁对比redis vs etcd 总结 为什么要实现分布式…...
《深度剖析:开源与闭源模型,AI舞台上的不同角色》
在人工智能蓬勃发展的当下,模型的选择如同为一场战役挑选合适的武器,至关重要。开源模型与闭源模型作为AI领域的两大阵营,在性能和应用场景上展现出显著差异,深刻影响着开发者、企业以及整个行业的走向。 性能差异:实…...
Angular结合C#
在 Angular 2 及以上版本与 C#结合使用 REST API 的示例中,我们将分别展示前端 Angular 服务和后端 C# Web API 的实现。 一、前端:Angular 服务 生成 Angular 服务 使用 Angular CLI 生成一个新的服务,例如user.service.ts: ng…...
Spring——自动装配
假设一个场景: 一个人(Person)有一条狗(Dog)和一只猫(Cat),狗和猫都会叫,狗叫是“汪汪”,猫叫是“喵喵”,同时人还有一个自己的名字。 将上述场景 抽象出三个实体类&…...
Servlet与JSP:Java的秘密花园入口
1 Servlet概述 Servlet是Java Web应用中的一个核心组件,它是一个运行在服务器端的Java程序,可以响应客户端的请求并生成响应。Servlet为Web应用提供了一个统一的接口来处理HTTP请求。 2 Servlet的生命周期 Servlet的生命周期包括以下几个阶段ÿ…...
【Linux】Linux常见指令(上)
个人主页~ 初识Linux 一、Linux基本命令1、ls指令2、pwd命令3、cd指令4、touch指令5、mkdir指令6、rmdir指令7、rm指令8、man指令9、cp指令10、mv命令 Linux是一个开源的、稳定的、安全的、灵活的操作系统,Linux下的操作都是通过指令来实现的 一、Linux基本命令 先…...
ELFK日志采集实战
一、日志分析概述 日志分析是运维工程师解决系统故障,发现问题的主要手段 日志主要包括系统日志、应用程序日志和安全日志 系统运维和开发人员可以通过日志了解服务器软硬件信息、检查配置过程中的错误及错误发生的原因 经常分析日志可以了解服务器的负荷&#x…...
Kubernetes 使用自定义资源(CRD)扩展API
K8s CRD 即 Kubernetes CustomResourceDefinition,是 Kubernetes 提供的一种扩展机制,允许用户在 Kubernetes 集群中定义和使用自定义的资源类型。通过定义 CRD,用户可以在 Kubernetes 集群中创建、读取、更新和删除自定义资源对象࿰…...
用户使用LLM模型都在干什么?
Anthropic 对用户与 Claude 3.5 Sonnet 的大量匿名对话展开分析,主要发现及相关情况如下: 使用用途分布 软件开发主导:在各类使用场景中,软件开发占比最高,其中编码占 Claude 对话的 15% - 25%,网页和移动应…...
MySQL常用命令之汇总(Summary of Commonly Used Commands in MySQL)
MySQL常用命令汇总 简介 MySQL是一个广泛使用的开源关系型数据库管理系统,由瑞典的MySQL AB公司开发,现属于Oracle公司。 MySQL支持SQL(结构化查询语言),这是数据库操作的标准语言,用户可以使用SQL进…...
六年之约day10
今日开心∶今天部门开了个颁奖大会,看着别人收获的荣誉,还真有些羡慕,什么时候,我也能拥有属于自己的荣誉啊. 今日不开心∶活没干多少,对业务也不是很懂 今日思考∶很多事情,存在即合理.工作,…...
springboot和vue配置https请求
项目场景: 代码发布到线上使用https请求需要配置ssl证书,前后端都需要修改。 问题描述 如图,我们在调用接口时报如下错误,这就是未配置ssl但是用https请求产生的问题。 解决方案: 前端:在vite.config.js文…...
selenium遇见伪元素该如何处理?
🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 问题发生 在很多前端页面中,大家会见到很多::before、::after 元素,比如【百度流量研究院】: 比如【百度疫情大数…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...
JDK 17 序列化是怎么回事
如何序列化?其实很简单,就是根据每个类型,用工厂类调用。逐个完成。 没什么漂亮的代码,只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...
电脑桌面太单调,用Python写一个桌面小宠物应用。
下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡,可以响应鼠标点击,并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...
