当前位置: 首页 > news >正文

在react项目中如何引入国际化

react-i18next

在 React 项目中引入国际化(Internationalization,简称 i18n)可以使用第三方库来实现。其中,最常用且流行的国际化库是 react-i18next,它基于 i18next 实现,提供了方便易用的国际化功能。下面是在 React 项目中使用 react-i18next 的基本步骤:

  1. 安装依赖:

首先,在 React 项目中安装 react-i18nexti18next 依赖:

npm install i18next react-i18next
  1. 初始化 i18next:

在项目的入口文件(通常是 index.jsApp.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": "你好"}
}

不同页面用不同的文件夹管理,这样会更清楚。

  1. 切换语言:

可以通过 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;
  1. 使用 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 的基本步骤:

  1. 安装依赖:

首先,在 React 项目中安装 react-intl-universal 依赖:

npm install react-intl-universal
  1. 初始化国际化资源:

在项目的入口文件(通常是 index.jsApp.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')
);
  1. 创建翻译文件:

在项目的 src 目录下,创建一个 locales 文件夹,并在其中添加语言文件。例如,创建 en.jsonzh.json 文件:

en.json:

{"hello": "Hello","welcome": "Welcome, {name}"
}

zh.json:

{"hello": "你好","welcome": "欢迎,{name}"
}
  1. 使用 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;
  1. 切换语言:

您可以在项目中使用 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 项目中引入国际化&#xff08;Internationalization&#xff0c;简称 i18n&#xff09;可以使用第三方库来实现。其中&#xff0c;最常用且流行的国际化库是 react-i18next&#xff0c;它基于 i18next 实现&#xff0c;提供了方便易用的国际化功能。下…...

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 只能用来储存字符串数据&#xff0c;所以为了去储存object类型的数据&#xff0c;得先进行序列化&#xff08;JSON.stringify()&#xff09;当你想要使用数据的时候&…...

Postgresql数据库中的时间类型汇总

PostgreSQL数据库有以下几种时间类型 1 日期 date&#xff1a;表示日期&#xff0c;格式为YYYY-MM-DD。 2 时间 time&#xff1a;表示时间&#xff0c;格式为HH:MI:SS。 3 日期和时间 timestamp&#xff1a;表示日期和时间&#xff0c;格式为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迁移数据

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

5分钟开发一个AI论文抓取和ChatGPT提炼应用

5分钟开发一个AI论文抓取和ChatGPT提炼应用 第一步 点击“即刻开始” -选择模板 python -修改标题 “AIPaper”&#xff0c;项目标识“AIPaper”&#xff0c;点击“创建项目” 第二步 在编程区域右侧AI区域&#xff0c;输入框输入以下内容&#xff1a; 请根据下面的内容&…...

SK5代理与网络安全:保障爬虫隐匿性与HTTP连接稳定性

一、SK5代理简介 SK5代理&#xff0c;即socks5代理&#xff0c;是一种网络协议&#xff0c;用于在客户端和服务器之间进行数据传输。相比其他代理协议&#xff0c;如HTTP代理&#xff0c;SK5代理具有更高的性能和安全性&#xff0c;支持TCP和UDP连接&#xff0c;并可以处理更复…...

基于4G网络的嵌入式设备远程升级系统设计与实现(学习一)

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

陪诊小程序软件|陪诊系统定制|医院陪诊小程序

开发一个陪诊小程序需要投入一定的费用&#xff0c;具体金额会因项目的复杂程度、功能需求和推广政策而有所差异在投入资金之前&#xff0c;建议进行市场调研和需求分析&#xff0c;制定出合理的预算&#xff0c;并选择专业的开发团队进行合作&#xff0c;那么开发陪诊小程序需…...

[数据集][目标检测]空中飞鸟目标检测数据集VOC格式4955张

数据集名称&#xff1a;空中飞鸟数据集VOC-4955张 数据集制作单位&#xff1a;未来自主研究中心(FIRC) 图片数量(jpg文件个数)&#xff1a;4955 标注数量(xml文件个数)&#xff1a;4955 标注类别数&#xff1a;1 标注类别名称:["bird"] 每个类别标注的框数&#xff1…...

安徽现货黄金代理请看这篇

持续两三年的新冠疫情&#xff0c;令全球经济遭受不同程度的打击&#xff0c;很多传统的行业更是重灾区&#xff0c;当中不少从业多年的朋友表示虽然看不清前进&#xff0c;但也不敢随便转行&#xff0c;如果那么有一份这样的工作&#xff0c;既不用他们离开本职&#xff0c;也…...

HTML JS实现点击按钮下载文件功能例子(C知道版)

其实这篇应该算是一篇“水”文章&#xff0c;为什么要这么“水”呢&#xff0c;除了最近南方的气候闷热难耐需要降温之外&#xff0c;另一个主要原因&#xff0c;这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成&#xff0c;我在这里只是简单记录一下&#xff…...

企业网络安全与数据保护合规建设 ——从合规运营到香港上市

序言 《企业网络安全与数据保护合规建设 ——从合规运营到香港上市&#xff08;一&#xff09;》梳理了我国网络安全与数据保护领域近期主要立法情况&#xff0c;本文将着重分析拟赴港上市企业运营阶段的数据合规要点以期为拟赴港上市的相关企业提供有益的参考。 二 企业运营…...

antdv Select dropdownRender Input 不能输入的问题

简言之&#xff1a;外层套div&#xff0c;然后利用Select的open属性。直接上代码&#xff1a; <template><a-form-item-rest><div click"selOpen !selOpen"><Selectv-model:value"xxx"placeholder"请选择":options"g…...

PostgreSQL 查询json/jsonb是否存在某个片段

文章目录 前言实现实现思路坑1坑2坑3 恍然大悟 前言 在PostgreSQL中&#xff0c;jsonb有额外的操作符&#xff0c;如 >、<、?、?|、?& 可以用来查询是否包含路径/值&#xff0c;以及顶层键值是否存在。 详细文章&#xff1a;PostgreSQL 操作json/jsonb 那么&am…...

Spring 官方文档及相关资料的网址集合

文章目录 MavenSpringSpring FrameworkSpring BootSpring Cloud AlibabaNacos Maven Maven 仓库依赖包官方查询通道&#xff1a;https://mvnrepository.com/ Maven 插件官方文档&#xff1a;https://maven.apache.org/plugins/ 安卓依赖包官方查询通道*&#xff1a;https://m…...

hypery 十一、命令行

教程&#xff1a;Hyperf symfony/console composer地址&#xff1a; symfony/console - Packagist github地址&#xff1a;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为占位符&#xff0c;QMessageBox显示时&#xff0c;arg中的变量值会替代 %1占位符&#xff0c;达到在QMessageBox弹出框中输出变量的目的。 2、const QString entry…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...