react-intl国际化在项目中的使用

2024-06-03 08:36

本文主要是介绍react-intl国际化在项目中的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

使用成熟的第三方库的国际化,可以直接使用封装好的方法,这个国际化的原理其实是使用了react 的第三方库react-intl ,感觉主要比较好的就是使用其中的模版,它的本质还是通过了Provider的形式

第一步新建文件夹,计划把所有的国际化相关的代码统统放到 src/locale 中以下是目录结构

src-local-languages (所有的翻译文件)-Provider (国际化包裹组件,其中调用国际化接口并合并最后注入)-index.ts(到处一些公共的语言相关的变量和方法)

1、项目入口 js文件

从入口 js 文件开始我们的工作,可以看到只使用了 IntlProvider 组件,并传入了当前的模块名字,在组件中通过模块名去请求后端的国际化内容

// 以下是 vite 的入口文件 main.tsx
import ReactDOM from 'react-dom/client'
import { Suspense } from 'react'
import 'amfe-flexible'import App from './App'// 国际的 Provider (包含 react-intl antd)
import IntlProvider from '@/locale/Provider'ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<IntlProvider moduleCodes='baseline'><Suspense><App /></Suspense></IntlProvider>
)

2、locale/index.ts文件

  1. 定义了当前的语言

  2. 定义了当前的 languages 翻译内容

  3. 导出了非组件中使用intl的方法(简写了一些代码,其他组件中都使用了hooks的国际化写法,这里导出是为了方便组件外面使用)

import { createIntl, createIntlCache } from "react-intl";import en_us from "./languages/en-us";
import zh_cn from "./languages/zh-cn";
import zh_tw from "./languages/zh-tw";// 所有的语言map
let languages = {"en-us": en_us,"zh-cn": zh_cn,"zh-tw": zh_tw,
};// 当前的语言
const lang = localStorage.getItem("language") || "zh-cn";// 非组件中使用intl
const intl = createIntl({locale: localStorage.getItem("language") || "zh-cn",messages: languages[lang],},createIntlCache()
);// 简写 intl.formatMessage(使得业务中少些代码)
const i18n = (id: string,defaultMessage?: string,description?: string | object
) => {return intl.formatMessage({ id, defaultMessage, description });
};export { languages, lang, intl, i18n };

3、locale/Provider组件

入口的使用的 IntlProvider 定义如下,可以看到该组件做了以下操作

  1. 引入locale/index.ts文件中的 当前语言、所有的语言翻译

  2. 组件挂载后立马通过 moduleCodes 获取后端国际化内容然后合并本地的国际化内容(具体每个项目不同),成功合并后渲染所有的子页面 {init && children}

  3. 处理UI库的国际化(这里是antd)

import { useEffect, useState } from 'react';
import { ConfigProvider } from 'antd'
import { IntlProvider } from 'react-intl'
import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';import { getIntl } from '@/api/user'
import { languages, lang } from '../index'dayjs.locale(lang )export default function Index(props: {children?: any,moduleCodes: string | Array<string>,
}) {let { children, moduleCodes } = propsconst [init, setInit] = useState(false)const [intl, setInel] = useState({})useEffect(() => {initData()}, [])const initData = async () => {// 接口请求获取国际化,并合并本地默认值let res = await getIntl(moduleCodes)let map = {}res.list.forEach((module: { [key: string]: string }) => {Object.keys(module).forEach(key => {Object.assign(map, module[key])})})setInel({ ...languages[lang], ...map })setInit(true)}return (<IntlProvider defaultLocale="zh-cn" locale={lang} messages={intl}><ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>{init && children}</ConfigProvider></IntlProvider>)
}

3、locale/languages

目前有两种语言文件 en-us.ts zh-cn.ts,导出一个键值对的对象

// en-us.ts
export default {"baseline.common.index": "No.",
};
//zh-cn.ts
export default {"baseline.common.index": "序号",
};

4、国际化的使用

这是函数组的使用,类组件的使用可以使用上面locale/index.ts导出的的 intl,具体的使用可以点进去看 react-intl 的定义

import { useIntl } from 'react-intl';function Component(){const intl = useIntl();useEffect(() => {// 测试intl.formatMessage({ id: 'baseline.common.index'});}, [])
}

这篇关于react-intl国际化在项目中的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026481

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.