在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需要注意的是,每次更新语言需要重新加载页面。

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

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

相关文章

手风琴案例(jQuery)

案例效果 代码实现 jQuery代码&#xff08;两种方法&#xff09; 方法一&#xff1a;hover版 $(function () {$(".king li").hover(function() {$(this).addClass("current").siblings().removeClass("current");}, function() {$(".king…

单机部署NGINX

​ 1、找到合适的nginx资源包&#xff0c;可以去官网下载 这里用的是 nginx-1.24.0.tar.gz 2、上传下载下来的nginx软件包&#xff0c;并解压 tar zxvf nginx-1.24.0.tar.gz cd nginx-1.24.0/ 3、安装nginx 编译 ./configure --prefix/usr/local/nginx --with-http_ssl…

哈希表的简单模拟实现

文章目录 底层结构哈希冲突闭散列定义哈希节点定义哈希表**哈希表什么情况下进行扩容&#xff1f;如何扩容&#xff1f;**Insert()函数Find()函数二次探测HashFunc()仿函数Erase()函数全部的代码 开散列定义哈希节点定义哈希表Insert()函数Find()函数Erase()函数总代码 初识哈希…

UG\NX二次开发 获取2D制图视图中可见的对象,并获取类型

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 使用UF_VIEW_ask_visible_objects获取2D制图视图中可见的对象,并获取类型。 下面是将一个六面体以不同的视图投影,获取视图对象和类型的效果。 效果: 1个部件事例,1个体,4条边 1个部件事…

springboot创建并配置环境(一) - 创建环境

文章目录 一、介绍二、启动环境Environment的分析三、进入源码四、创建环境1. 如何确定应用类型2. 测试 一、介绍 在springboot的启动流程中&#xff0c;启动环境Environment是可以说是除了应用上下文ApplicationContext之外最重要的一个组件了&#xff0c;而且启动环境为应用…

MySQL主从复制

1.理解MySQL主从复制原理。 1.1MySQL支持的复制类型 MySQL支持以下几种常见的复制类型&#xff1a; 基于语句的复制&#xff08;Statement-based Replication&#xff0c;SBR&#xff09;&#xff1a;基于语句的复制是MySQL最早支持的复制方式&#xff0c;它通过复制和执行S…

语义分割训练报UDA error: an illegal memory access was encountered

报错信息如下&#xff1a; terminate called after throwing an instance of ‘c10::Error’ what(): CUDA error: an illegal memory access was encountered Exception raised from create_event_internal at /opt/conda/conda-bld/pytorch_1603729128610/work/c10/cuda/CUDA…

CSS3 实现边框圆角渐变色渐变文字效果

.boder-txt {width: 80px;height: 30px; line-height: 30px;padding: 5px;text-align: center;border-radius: 10px;border: 6rpx solid transparent;background-clip: padding-box, border-box;background-origin: padding-box, border-box;/*第一个linear-gradient表示内填充…

每日一题7.28 209

209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 本题应该是用前缀…

分布式锁面试专题

推荐看的一些文章 1 分布式锁 2 强推&#xff1a; 怎样实现redis分布式锁&#xff1f; 关于分布式锁的选用问题 与大多数工具一样&#xff0c;分布式锁的选择需要根据业务场景确定。 比如在注重性能的场景&#xff0c;比如使用分布式锁 直接使用单机版但是能保证主从复制性质…

C++动态内存管理

目录 C语言中的动态内存管理C动态内存管理动态管理内置类型动态管理自定义类型 new和delete的实现原理operator new和operator delete函数new和delete对内置类型的实现原理new和delete对自定义类型的实现原理 malloc/free和new/delete区别 C语言中的动态内存管理 之前学习了C语…

Nginx系列之 一 负载均衡

目录 一、Nginx概述 1.1 负载均衡概述 1.2 负载均衡的作用 1.3 四/七层负载均衡 1.3.1 网络模型简介 1.3.2 四层和七层负载均衡对比 1.3.3 Nginx七层负载均衡实现 1.4 Nginx负载均衡配置 1.5 Nginx负载均衡状态 1.6 Nginx负载均衡策略 二、负载均衡实战 2.1 测试服…

算法通关村第一关——链表白银挑战笔记

文章目录 两个链表的第一个重合节点判断回文链表 两个链表的第一个重合节点 同LeetCode 160.相交链表 解法一&#xff1a;Hash和Set(集合&#xff09;&#xff0c;此处用Set合适。 把其中一个链表的所有节点引用放入set&#xff0c;再从头遍历另一个链表第一次重合的地方就是答…

Android性能优化之SharedPreference卡顿优化

下面的源码都是基于Android api 31 1、SharedPreference使用 val sharePref getPreferences(Context.MODE_PRIVATE) with(sharePref.edit()) { putBoolean("isLogin", true)putInt("age", 18)apply() } val isLogin sharePref.getBoolean("isLogi…

windows环境下docker数据迁移到其他盘

docker安装在C盘&#xff0c;使用一段时间后&#xff0c;C盘爆满。因此想把C盘中的数据迁移到其他盘&#xff0c;以释放C盘空间。分为以下步骤&#xff1a; 1、启动docker软件&#xff0c;打开PowerShell并切换到Docker Compose配置文件的目录。 Docker Compose配置文件的目录…

通过社区参与解锁早期增长:Maven 远程医疗平台概览

Maven通过用户导向的渐进式验证&#xff0c;找到了一个被忽视的巨大女性医疗服务市场&#xff0c;作为女性医疗保健的先行者&#xff0c;已服务超过1500万用户&#xff0c;目前估值已达$14亿。本文将深入探索Maven实现产品市场匹配的三个阶段&#xff0c;从如何验证初始的市场机…

Vue2基础十、Vuex

零、文章目录 Vue2基础十、Vuex 1、vuex概述 &#xff08;1&#xff09;vuex是什么 vuex 是一个 vue 的 状态管理工具&#xff0c;状态就是数据。大白话&#xff1a;vuex 是一个插件&#xff0c;可以帮我们管理 vue 通用的数据 (多组件共享的数据) 例如&#xff1a;购物车数…

Linux安装部署Nacos和sentinel

1.将nacos安装包下载到本地后上传到linux中 2.进入nacos的/bin目录,输入命令启动nacos [rootlocalhost bin]# sh startup.sh -m standalone注:使用第二种方式启动,同时增加日志记录的功能 2.2 startup.sh文件是不具备足够的权限,否则不能操作 给文件赋予执行权限 [rootlocalh…

【lesson5】linux vim介绍及使用

文章目录 vim的基本介绍vim的基本操作vim常见的命令命令模式下的命令yypnyynpuctrlrGggnG$^wbh,j,k,lddnddnddp~shiftrrnrxnx 底行模式下的命令set nuset nonuvs 源文件wq!command&#xff08;命令&#xff09; vim配置解决无法使用sudo问题 vim的基本介绍 首先vim是linux下的…

十、数据结构——链式队列

数据结构中的链式队列 目录 一、链式队列的定义 二、链式队列的实现 三、链式队列的基本操作 ①初始化 ②判空 ③入队 ④出队 ⑤获取长度 ⑥打印 四、循环队列的应用 五、总结 六、全部代码 七、结果 在数据结构中&#xff0c;队列&#xff08;Queue&#xff09;是一种常见…