在react项目中如何引入国际化
react-i18next
在 React 项目中引入国际化(Internationalization,简称 i18n)可以使用第三方库来实现。其中,最常用且流行的国际化库是 react-i18next
,它基于 i18next 实现,提供了方便易用的国际化功能。下面是在 React 项目中使用 react-i18next
的基本步骤:
- 安装依赖:
首先,在 React 项目中安装 react-i18next
和 i18next
依赖:
npm install i18next react-i18next
- 初始化 i18next:
在项目的入口文件(通常是 index.js
或 App.js
)中初始化 i18next:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import { nextLocal } from './nextLocals'; // 定义的语言文件i18n.use(initReactI18next).init({// 设置语言资源,可以根据需要引入其他语言文件resources: {en: {translation: {// 将所有需要国际化的文本放在这里// 例如:"hello": "Hello",...nextLocal.en},},zh: {translation: {// 中文翻译// 例如:"hello": "你好",...nextLocal.zh},},},lng: 'zh', // 默认语言fallbackLng: 'zh', // 如果当前语言没有对应的翻译,将使用该语言作为备用interpolation: {escapeValue: false, // 不要对翻译的文本进行转义,以支持 HTML 标签},});ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
上面用到的nextLocals文件如下:
// index.tsx
import homeEn from "./Home/en.json";
import homeZh from "./Home/zh.json";export const nextLocal = {en: { ...homeEn },zh: { ...homeZh },
};// ./Home/en.json
{"home": {"hello": "Hello"}
}// ./Home/en.json
{"home": {"hello": "你好"}
}
不同页面用不同的文件夹管理,这样会更清楚。
- 切换语言:
可以通过 i18n.changeLanguage()
方法来在组件中切换语言。例如,可以在项目中添加一个按钮来切换语言,这里定义了一个ChangeLanguage文件,内容如下:
import React from "react";
import { Button } from "antd";
import { useTranslation } from "react-i18next";const LanguageSwitcher=()=> {const { i18n } = useTranslation();const changeLanguage = (lng: "en" | "zh") => {i18n.changeLanguage(lng);};return (<div><Buttontype="primary"style={{ marginRight: 8 }}onClick={() => changeLanguage("en")}>English</Button><Button onClick={() => changeLanguage("zh")}>中文</Button></div>);
}export default LanguageSwitcher;
- 使用
useTranslation
钩子:
在需要国际化的组件中,可以使用 useTranslation
钩子来获取翻译函数,并进行文本的国际化:
这里引用了上面的组件ChangeLanguage,可以点击切换语言
import React from 'react';
import { useTranslation } from 'react-i18next';
import ChangeLang from './ChangeLanguage'function MyComponent() {const { t } = useTranslation();return (<div>{/* 使用 t 函数进行国际化 */}<ChangeLang /><div style={{paddingTop: 16}}> {t('home.hello')}</div></div>);
}export default MyComponent;
react-intl-universal
使用 react-intl-universal
是另一个流行的 React 国际化库,它提供了简单易用的国际化功能。下面是在 React 项目中使用 react-intl-universal
的基本步骤:
- 安装依赖:
首先,在 React 项目中安装 react-intl-universal
依赖:
npm install react-intl-universal
- 初始化国际化资源:
在项目的入口文件(通常是 index.js
或 App.js
)中初始化国际化资源:
import React from 'react';
import ReactDOM from 'react-dom';
import intl from 'react-intl-universal';
import App from './App';const locales = {en: require('./locales/en.json'), // 英文翻译文件zh: require('./locales/zh.json'), // 中文翻译文件
};const currentLocale = localStorage.getItem('language') || 'zh'; // 默认语言
intl.init({currentLocale,locales,
});ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
- 创建翻译文件:
在项目的 src
目录下,创建一个 locales
文件夹,并在其中添加语言文件。例如,创建 en.json
和 zh.json
文件:
en.json
:
{"hello": "Hello","welcome": "Welcome, {name}"
}
zh.json
:
{"hello": "你好","welcome": "欢迎,{name}"
}
- 使用
FormattedMessage
组件:
在需要国际化的组件中,可以使用 FormattedMessage
组件来进行文本的国际化,并支持变量插值:
import React from 'react';
import { FormattedMessage } from 'react-intl-universal';const MyComponent()=> {const name = 'John';return (<div>{/* 使用 <FormattedMessage> 组件进行国际化 */}<p>{intl.get('hello')}</p><p>// 或者这么使用<FormattedMessage id="welcome" values={{ name }} /></p></div>);
}export default MyComponent;
- 切换语言:
您可以在项目中使用 intl.setLocale()
方法来切换语言。例如,您可以在项目中添加一个按钮来切换语言:
import React from 'react';const LanguageSwitcher = ()=> {const changeLanguage = (locale: 'en' | 'zh') => {localStorage.setItem('language',locale); // 保存window.location.reload(); // 重新加载页面};return (<div><button onClick={() => changeLanguage('en')}>English</button><button onClick={() => changeLanguage('zh')}>中文</button></div>);
}export default LanguageSwitcher;
使用react-intl-universal需要注意的是,每次更新语言需要重新加载页面。
相关文章:
在react项目中如何引入国际化
react-i18next 在 React 项目中引入国际化(Internationalization,简称 i18n)可以使用第三方库来实现。其中,最常用且流行的国际化库是 react-i18next,它基于 i18next 实现,提供了方便易用的国际化功能。下…...
spring学习笔记十三
注解实现管理第三方Bean和为第三方Bean注入资源 1、添加pom坐标 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.16</version></dependency> 2、SpringConfig配置类 Configuratio…...

react native 本地存储 AsyncStorage
An asynchronous, unencrypted, persistent, key-value storage system for React Native. Async Storage 只能用来储存字符串数据,所以为了去储存object类型的数据,得先进行序列化(JSON.stringify())当你想要使用数据的时候&…...
Postgresql数据库中的时间类型汇总
PostgreSQL数据库有以下几种时间类型 1 日期 date:表示日期,格式为YYYY-MM-DD。 2 时间 time:表示时间,格式为HH:MI:SS。 3 日期和时间 timestamp:表示日期和时间,格式为YYYY-MM-DD HH:MI:SS。 4 带…...
算法刷题Day 51 最佳买卖股票时机含冷冻期+买卖股票的最佳时期含手续费
Day 51 动态规划 309. 最佳买卖股票时机含冷冻期 关键是要画出状态转移图 然后根据状态转移图来写状态转移方程 class Solution { public:int maxProfit(vector<int>& prices) {int len prices.size();vector<vector<int>> dp(len, vector<int&g…...
编程导航算法村 第五关 | 白银挑战
编程导航算法村 第五关 | 白银挑战 用栈实现队列 LeetCode 232题 class MyQueue {private Stack<Integer> stack; // 保存private Stack<Integer> tempstack; // 临沭队列public MyQueue() {stack new Stack<>();tempstack new Stack<>();}public…...

(十六十七)时序数据库是怎么存储用户名和密码的从InfluxDB OSS迁移数据
以下内容来自 尚硅谷,写这一系列的文章,主要是为了方便后续自己的查看,不用带着个PDF找来找去的,太麻烦! 第 16 章 时序数据库是怎么存储用户名和密码的 1、InfluxDB内部自带了一个用Go语言写的BlotDB,Blo…...

5分钟开发一个AI论文抓取和ChatGPT提炼应用
5分钟开发一个AI论文抓取和ChatGPT提炼应用 第一步 点击“即刻开始” -选择模板 python -修改标题 “AIPaper”,项目标识“AIPaper”,点击“创建项目” 第二步 在编程区域右侧AI区域,输入框输入以下内容: 请根据下面的内容&…...
SK5代理与网络安全:保障爬虫隐匿性与HTTP连接稳定性
一、SK5代理简介 SK5代理,即socks5代理,是一种网络协议,用于在客户端和服务器之间进行数据传输。相比其他代理协议,如HTTP代理,SK5代理具有更高的性能和安全性,支持TCP和UDP连接,并可以处理更复…...

基于4G网络的嵌入式设备远程升级系统设计与实现(学习一)
摘要 随着无线通信技术的不断更新发展,嵌入式设备的联网应用领域得以大规模扩大,远程升级功能成为产品开发中必不可少的一部分。 本文对嵌入式设备远程升级进行了研究,在不改变设备硬件集成度基础上,设计实现了分离式升级的远程…...

陪诊小程序软件|陪诊系统定制|医院陪诊小程序
开发一个陪诊小程序需要投入一定的费用,具体金额会因项目的复杂程度、功能需求和推广政策而有所差异在投入资金之前,建议进行市场调研和需求分析,制定出合理的预算,并选择专业的开发团队进行合作,那么开发陪诊小程序需…...
[数据集][目标检测]空中飞鸟目标检测数据集VOC格式4955张
数据集名称:空中飞鸟数据集VOC-4955张 数据集制作单位:未来自主研究中心(FIRC) 图片数量(jpg文件个数):4955 标注数量(xml文件个数):4955 标注类别数:1 标注类别名称:["bird"] 每个类别标注的框数࿱…...

安徽现货黄金代理请看这篇
持续两三年的新冠疫情,令全球经济遭受不同程度的打击,很多传统的行业更是重灾区,当中不少从业多年的朋友表示虽然看不清前进,但也不敢随便转行,如果那么有一份这样的工作,既不用他们离开本职,也…...
HTML JS实现点击按钮下载文件功能例子(C知道版)
其实这篇应该算是一篇“水”文章,为什么要这么“水”呢,除了最近南方的气候闷热难耐需要降温之外,另一个主要原因,这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成,我在这里只是简单记录一下ÿ…...
企业网络安全与数据保护合规建设 ——从合规运营到香港上市
序言 《企业网络安全与数据保护合规建设 ——从合规运营到香港上市(一)》梳理了我国网络安全与数据保护领域近期主要立法情况,本文将着重分析拟赴港上市企业运营阶段的数据合规要点以期为拟赴港上市的相关企业提供有益的参考。 二 企业运营…...
antdv Select dropdownRender Input 不能输入的问题
简言之:外层套div,然后利用Select的open属性。直接上代码: <template><a-form-item-rest><div click"selOpen !selOpen"><Selectv-model:value"xxx"placeholder"请选择":options"g…...

PostgreSQL 查询json/jsonb是否存在某个片段
文章目录 前言实现实现思路坑1坑2坑3 恍然大悟 前言 在PostgreSQL中,jsonb有额外的操作符,如 >、<、?、?|、?& 可以用来查询是否包含路径/值,以及顶层键值是否存在。 详细文章:PostgreSQL 操作json/jsonb 那么&am…...
Spring 官方文档及相关资料的网址集合
文章目录 MavenSpringSpring FrameworkSpring BootSpring Cloud AlibabaNacos Maven Maven 仓库依赖包官方查询通道:https://mvnrepository.com/ Maven 插件官方文档:https://maven.apache.org/plugins/ 安卓依赖包官方查询通道*:https://m…...
hypery 十一、命令行
教程:Hyperf symfony/console composer地址: symfony/console - Packagist github地址:GitHub - symfony/console: Eases the creation of beautiful and testable command line interfaces hyperf/command github地址:https://github.com/…...
QT占位符 %n+arg()、QString的格式化arg(补零/进制转换)
一、 1、QMessageBox::warning(this, tr("查找"), tr("找不到%1").arg(str)); 其中 %1为占位符,QMessageBox显示时,arg中的变量值会替代 %1占位符,达到在QMessageBox弹出框中输出变量的目的。 2、const QString entry…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...

push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...

wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...