处理umi国际化useIntl不能在类组件中使用

最新推荐文章于 2024-05-08 14:02:50 发布
最新推荐文章于 2024-05-08 14:02:50 发布
阅读量3.9k 收藏 2
点赞数 4
分类专栏： 前端 全栈 文章标签： react umi useIntl 国际化 封装国际化助手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_H5211/article/details/116901794
版权

[有猿友说ta在类组件中不能使用，我在新的地方复现的时候发现确实；之前的实现无疑中绕过了useIntl，只是表面上实现了可以在类组件中使用；因此产生本次更新，将国际化完全困在一个函数组件中，这样就真的不管外面怎么调用了，因为之前进行了封装 ，因此本次修改 不会影响之前代码的编写--》更新IntlInit在在其中调用一个函数组件完成国际化功能】

使用umi中useIntl在类组件中时报错。

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

相关问题描述

  • 在非函数式组件中使用formatMessage 报错
  • 无法在类组件中使用useIntl
  • umi国际化不能在类组件中使用
最低0.47元/天 解锁文章
M_H5211
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
umi多语言 | 国际化 踩坑
weixin_48092226的博客
09-23 2703
文件：src/locales/zh-CN.ts export default { message: '明天我就找个女朋友', } 一、适合在组件中使用的方法 1.函数调用的形式 import { useIntl } from 'umi'; const FormatMessage = () => { const { formatMessage } = useIntl(); return <div>{formatMessage({ id: 'mes..
关于UMI中 useModel的使用（踩坑记录）
热门推荐
weixin_43169949的博客
11-05 1万+
最近用React + UMI +qiankun的框架撸了一个后台管理系统，主应用使用的qiankun做的微前端，子运用使用的是UMI搭建的React 项目，涉及到主应用与子运用的通信问题。 1.主应用用的qiankun中的registerMicroApps进行的传值，代码如下： registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:8080', container:
React&nbsp；Umi国际化配置方法
最新发布
菜鸟教程
05-08 383
到此这篇关于React Umi国际化配置的文章就介绍到这了,更多相关React Umi国际化内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
前端国际化（umi的useIntl）
wangzhichaogege的博客
01-29 9056
import { useIntl } from 'umi’; const intl = useIntl(); <html id="pages.searchTable.updateForm.ruleName.nameLabel" /> 使用起来是很简单的，但是构造起来需要梳理的很清晰才行，并且建议在项目搭建初期就要考虑好一套完整的国际化配置，否则后期再加的话会很麻烦 国际化的配置 export default { 'component.globalH...
umi使用plugin-locale配置国际化(useIntl)
huanhuan03的博客
10-08 5541
useIntl getLocale setLocale SelectLang
react+umi国际化使用
damahou11的博客
11-08 201
（在class组件中）
umi3使用国际化
YanHSama的博客
10-12 1640
umi3官网：https://v3.umijs.org/zh-CN/plugins/plugin-locale。项目src目录下新建目录locales。
umi-plugin-mobx:in在umijs中正常使用mobx-state-tree
03-21
:smiling_face_with_heart-eyes:与umi一起使用mobx-state-tree 。 :sparkles:特征 自动使用状态树节点包装路线组件。 通过使用umi/dynamic支持动态导入状态树节点。 使用Mobx生态系统而不是Redux。 解析规则与umi-...
Alita基于Umi的场景化框架-其他
06-11
内置了这阶段帮社区朋友开发的一些umi插件，达到了在配置文件中设置appType:'h5'就能着手移动端页面开发的效果。 后来结合混合开发的需求，增加了cordova相关插件，达到了在配置文件中设置appType:'cordova'就能着手...
umi-plugin-md::cooked_rice:用于umi的Markdown（*。md）组件插件
05-26
仅使用umi和markdown创建您的网站。 方便，强大的博客，文档站点和GitBook。 将markdown转换为组件：由markdown-it加载并转换为React组件。 自动创建路线：从目录自动创建降价路线。 自动锚点：自动为h1 ， h2和...
umi-datav:数据可视化
05-01
umi-datav 数据可视化 目录 组件库 相关教程 官网 - UmiJS 官网 - Yarn 官网 - DvaJS 官网 - Ant Design 官网 - React 中文网 - React Github - UmiJS Github - DvaJS Github - roadhog 开源协议 MIT
use-next-intl-format:超轻量级和零依赖的React Hook，可为Next.js i18n创建备忘录化的Intl本机实例
04-07
使用下一个intl格式 和零依赖的React Hook，可为Next.js i18n创建备忘录化的Intl本机实例 安装 该模块包括打字稿打字。 npm install --save use-next-intl-format yarn add use-next-intl-format 支持的国际帮助者 —通过useIntlDateTimeFormat —通过useIntlRelativeTimeFormat —通过useIntlNumberFormat —通过useIntlPluralRules 用法 有关options参考，请参见 有关options参考，请参见 这仅适用于Next.js应用程序。 import * as React from 'react' import { useIntlDateTimeFormat , useIntlNumberFormat }
umi3+dva编程学习资源，自用
06-21
在 umi3 中使用 dva，可以将 dva 的 Model、Reducer、Effect 和 Subscription 与 umi3 的 pages 结合使用，实现更加简洁和高效的开发。 结论 dva 是一个基于 Redux 和 Redux-saga 的数据流方案，它可以简化异步...
模块‘umi‘没有导出的成员XXX
u010234868的专栏
01-17 3943
2）command + p，输入：restart TS Server，重启 TS 服务。首先，查看下 tsconfig.json 文件的配置是否正确。1）关闭vscode，重新打开项目查看报错消失。有报错提示：模块'umi'没有导出的成员XXX。原因：ts 对 umi 的识别。
使用Umi 遇到的错误
qq_53280805的博客
11-23 3588
UmiJS
在umi中使用antd布局触发的警告“export ‘SelectLang‘ was not found in ‘umi‘“
weixin_44476861的博客
11-11 5330
今天看umi文档的时候，跟着文档教程一步一步走。 想在项目中使用antd布局，文档对应内容如下： 于是我在项目中进行了如下的配置： 该部分代码来源于umi文档的插件模块 当我运行代码时，却触发了警告。 因为上面的locale设置 为true。 为了解决这个问题，可以根据项目需求，如果不需要进行国际化设置为false即可。 需要进行国际化，添加@umijs/plugin-locale插件的配置。 警告就可以消除。 ...
react-intl国际化踩坑记录
百岁如流富贵冷灰的博客
04-13 1851
最近的项目中有国际化的需求，经过调研之后决定使用react-intl进行。特地记录一下开发中需要注意的点及踩过的坑。 1.在class组件中如何使用以及ts类型的声明 通常在函数组件中我们直接通过useIntl这个钩子函数来使用，但是在class组件中是没法使用钩子函数的。这个时候就需要用到react-intl提供的另外一个方法injectIntl。具体使用方法如下 // 定义的props要继承react-intl的WrappedComponentProps interface ICommonDia
react-intl中injectIntl/intlProvider方法的源码简析
高山上的鱼
12-27 9859
问题：react-intl用法部分 function Home(props) { return ( ); } export default injectIntl(Home);//传入一个包裹组件WrappedCom
umi框架中如何实现两个类赋值组件的数据传递
04-23
在umi框架中，可以使用dva来实现两个组件之间数据传递。具体实现方式如下： 1. 在一个组件中，通过dispatch函数来派发一个action，这个action的type字段可以用来表示要传递的数据类型。 2. 在另一个组件中，可以监听这个类型的action，当接收到这个action时，可以通过reducers函数将这个数据保存下来，然后用connect函数将这个数据映射到当前组件的props中。 3. 在第一个组件中，可以通过绑定事件的方式来监听第二个组件的props中的数据是否发生了变化，如果发生了变化，则可以执行相应的回调函数来处理这个变化。 例如，假设有两个组件A和B，需要在A中传递数据给B，具体实现方式如下： 1. 在组件A中，通过dispatch函数派发一个action，并传递一个payload参数。 ``` import { connect } from 'dva'; function ComponentA({ dispatch }) { function handleButtonClick() { dispatch({ type: 'componentsB/setData', payload: { name: '张三', age: 20 }, }); } return ( <div> <button onClick={handleButtonClick}>传递数据</button> </div> ); } export default connect()(ComponentA); ``` 在这里，我们派发了一个名为componentsB/setData的action，它的payload参数是一个包含了name和age字段的对象。 2. 在组件B中，监听componentsB/setData这个类型的action，并通过reducers函数来修改当前状态： ``` import { connect } from 'dva'; function ComponentB({ name, age }) { return ( <div> <p>姓名：{name}</p> <p>年龄：{age}</p> </div> ); } export default connect(({ componentsB }) => ({ name: componentsB.name, age: componentsB.age, }))(ComponentB); // reducers.js const initialState = { name: '', age: 0, }; export default { namespace: 'componentsB', state: initialState, reducers: { setData(state, { payload }) { return { ...state, ...payload, }; }, }, }; ``` 在这里，我们通过connect函数将componentsB的name和age映射到当前组件的props中，并通过reducers函数来修改当前状态。 3. 在组件A中，监听组件B的props中的数据是否发生了变化，并执行相应的回调函数来处理这个变化： ``` import { connect } from 'dva'; function ComponentA({ name, age }) { function handleDataChange() { console.log(`姓名：${name}，年龄：${age}`); } return ( <div> <p>姓名：{name}</p> <p>年龄：{age}</p> <button onClick={handleDataChange}>处理数据变化</button> </div> ); } export default connect(({ componentsB }) => ({ name: componentsB.name, age: componentsB.age, }))(ComponentA); ``` 在这里，我们通过connect函数将componentsB的name和age映射到当前组件的props中，并通过绑定事件的方式来监听props中的数据是否发生了变化，如果发生了变化，则执行handleDataChange函数来处理这个变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值