如何在react中使用多语言插件react-intl

最新推荐文章于 2024-04-05 09:39:17 发布
最新推荐文章于 2024-04-05 09:39:17 发布
阅读量507 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45942606/article/details/127657667
版权

1.在项目中我先准备好zh.js、en.js两个文件
在这里插入图片描述
2.准备设置redux中变量用来控制语言的切换，并使用react-redux注册到全局，至于在哪去切换，后面会讲到
在这里插入图片描述

3.再将上面两个js文件引入到App.jsx组件中，同时通过react-redux获取控制语言的变量，并赋值给IntlProvider上的locale，同时将该变量作为参数赋值给getMessage()并获取参数赋值给messages
在这里插入图片描述
4.在下拉框组件中，通过react-connect获取控制语言的变量和方法，通过点击下拉菜单获得的数据赋值给控制语言切换的方法
在这里插入图片描述
4.第四步通过点击切换数据的下拉来改变文字
在这里插入图片描述
点击前为英文
在这里插入图片描述
点击后为中文
在这里插入图片描述

@少年啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 使用 react-intl包 配置国际化
m0_62323931的博客
05-19 1214
注意:这里无论是FormattedMessage中的id还是formatMessage中的id，都与html中的id无任何联系，不会引起冲突，这里的id仅用于做国际化的标识， 编译后id将不会存在，无需有任何担心。注意:本篇文章中，只针对了中英文两种语言的切换，但实际上是可以对于多种语言的切换，并不局限于某几种语言，多种语言需要定义多个json文件，这个在你熟读完整篇文章后可以去尝试多语言的切换。注意:这一情况是针对于国际化业务的，提供解决问题思路，与任何npm无关，可以被任何国际化场景借鉴或使用。
react：中英文切换，多语言封装
m0_59148573的博客
06-13 872
2.src下创建locales文件夹， 并创建en-US.json和zh-CN.json文件。3.app.js入口文件配置。
React项目中使用React-intl实现多语言支持
你的爸爸
04-23 1672
在React项目中使用React-intl实现多语言支持 在项目开发的过程中，如果项目需要国际化，包含中文版和英文版，按理说逐字逐句替换也不是不可以，但是这种做法很low，并且对于国际化来说，不光是替换文字这么简单，而是要符合英文本土国家的语言习惯等等，例如数字的显示（中文：1,0000；英文：10,000），以及时间，量词（单复数）和语言习惯等等的显示方式，官方推荐在使用React-intl的时...
开发React应用的多语言支持最佳实践
Fisher的专栏
01-09 1403
[VoerkaI18n](https://zhangfisher.github.io/voerka-i18n/#/)是一款非常优秀的**全新的开源国际化多语言解决方案,本文介绍如何在React使用多语言
React 实现多语言（使用i18n）
Zybdads的博客
09-09 1237
React 使用i18n
react-intl 国际化多语言方案
weixin_33851177的博客
03-11 1004
之前项目采用了react-intl做多语言切换，记录一下。大体的实现原理和react-redux的实现原理类似，最外层包一个Provider，利用getChildContext，将intlConfigPropTypes存起来，在FormattedMessage、FormattedNumber等组件或者调用injectIntl生成的高阶组件中使用，来完成国际化的。使用过程也非常简单，和react-r...
React-intl 实现多语言的示例代码
08-28
下面是使用 React-intl 实现多语言支持的示例代码。 React-intl 的优点 使用 React-intl 可以方便地实现多语言支持，避免了传统的逐字替换方式，提高了代码的可维护性和可读性。 React-intl 还提供了多种格式化...
react-intl实现React国际化多语言的方法
10-14
一旦有了 `LocaleProvider`，我们就可以在组件中使用 `react-intl` 提供的组件和API进行国际化开发。比如，可以使用 `FormattedMessage` 组件或 `formatMessage` 函数来显示翻译文本： ```jsx import { ...
next-intl:用于将react-intl与Next.js集成的库
05-13
安装$ npm install --save @moxy/next-intl react-intl :information: 如果您正在运行Node.js < 13.1.0 ，则还必须安装full-icu并使用启动节点，或使用NODE_ICU_DATA=node_modules/full-icu 。设置1.配置next....
nextjs-with-react-intl:在无服务器安装中使用react-intl的示例
05-02
nextjs-with-react-intl 这个例子已经过时了，请参考next.js例子...npx create-next-app --example with-react-intl with-react-intl-app # or yarn create next-app --example with-react-intl with-react-intl-app
react 实现多语言
m0_61134931的博客
03-22 289
4.在根组件中应用多语言设置（通常是App组件）2.src目录下创建locales文件。
60+ 实用 React 工具库，助力你高效开发！
u012384510的博客
01-24 1132
大家好，我是若川。持续组织了5个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构...
推荐一款高效React国际化工具：react-intl-linter
最新发布
gitblog_00030的博客
04-05 498
推荐一款高效React国际化工具：react-intl-linter 项目地址:https://gitcode.com/Styx11/react-intl-linter 项目简介 react-intl-linter 是一个基于ESLint插件的开源项目，专为React应用提供国际化的代码审查工具。它可以帮助开发者遵循最佳实践，确保你的应用中的所有国际化消息都被正确处理，避免遗漏和错误。 技术分析 ...
React 中 react-i18next 切换语言（ 项目国际化 ）
大雾起了清晨
11-20 1383
平时中会遇到需求，就是切换语言，语种等。其实总的来说都是用i18n来实现的。
【react-intl组件】系统国际化——react-intl用法
qq_33539213的博客
09-24 8961
场景： 頂部banner配置語言切換菜單，默认为中文，用户選擇其他語種後，界面的固定展示信息切換到其他語種，且各個界面佈局展示正常。 参考：在 React 项目中使用 React-intl 实现多语言支持 经过多方面的考察，决定选择较为成熟的库react-intl来实现系统多语言配置。 使用步骤 1.安装react-intl npm install react-intl --save 注意：...
React 项目实现多语言切换
qq_35605231的博客
04-27 3205
前言： 在做项目过程中，遇到一个需求就是支持多语言，实现国际化的功能。感谢React社区的强大，提供了umi-plugin-locale插件来实现国际化的功能。 首先我们是基于 Umi 搭建的项目。 umi-plugin-locale约定 在 src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js， 注意：文件名称要和locale的值要对...
14. React 国际化(语言切换) react-intl-universal
qq_44438941的博客
03-17 1052
国际语言切换或统一字段存储到一个js文件中，哪里用时在引入
react-intl
Jinrong
11-16 1808
React Intl React Intl 用于国际化 React 组件，提供 React 组件和 API 来格式化日期，数字，字符串（包括单复数和翻译） 。这次只用它实现文本翻译。 用法 安装 npm install react-intl --save 载入语言环境数据。React Intl 依赖这些数据来支持单复数和相对时间格式化的功能。 // Main.js import { addLocaleData } from 'react-intl'; /* react-intl imports *
react-intl-universal
03-16
react-intl-universal是一个React国际化库，它提供了一种简单的方式来实现React应用程序的多语言支持。它支持多种语言和地区，并提供了一些有用的工具来处理日期、时间、货币和数字格式化等问题。此外，它还支持React Native应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值