dva/redux的connect 和useRef/forwardRef混用的问题

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

前言： 因为要做table 滚动条高度缓存，所以用了umi-plugin-keep-alive插件，导致被包裹的子组件useffect失效。故用父组件使用ref 调用子组件的getList方法实现页面更新。

但是项目用的Dva，和useRef 一起用ref会失效。

解决方法：在connect 方法的第四个参数加 forwardRef: true，即可实现透传效果，其余部分不变。

在这里插入图片描述

其余部分用法不变。

父组件：

在这里插入图片描述

子组件：

在这里插入图片描述

参考文章：

react-redux的connect与React.forwardRef结合ref失效的问题

画龍丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react装备上强大机甲Dva（一）
weixin_45048106的博客
10-20 543
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。 react只是由Facebook公司提出的UI解决方案，在使用过程中社区又出现了redux,而在Redux用的过程中会有许多的不方便，阿里团队的sorrycc 带领他的team对它做了轻量级的封装让...
使用connect后无法获取ref实例解决方法
qq27229639的博客
07-29 2432
问题 使用redux重构项目时，遇到了一个小问题：当使用connect连接forwardRef的函数组件时，无法获取组件实例，后台报错： Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 解决方案 通过搜索发现connect的第四个属性可以解决此问题，传入{forwardRef: true}即可（class组件为{wi
React 使用dva状态管理同时使用forwardRef，ref失效问题
m0_59216322的博客
02-21 425
React hooks如果你想使用forwardRef拿到子组件里的方法或状态，不使用高阶组件的情况下是可以的。但是如果使用了connect或者withRouter这一类的高阶函数后，ref就会失效。给第四个参数传入option，{ forwardRef: true }，可以完美解决。
react 父组件调用自组件方法，forwardRef与connect联合使用
A873054267的博客
10-22 1518
简单的调用网上很多，主要这两个联合 https://www.jianshu.com/p/9a41f3dc8468 父组件 let Draw = (props) => { let {headername,addCancelTools} = props; let [selIndex,setIndex] = useState(0); const childRef=useRef(); console.log(childRef) if(childRef.current){ c
React之React.forwardRef与connect联合使用出现的问题
IT侠客行的博客
09-28 1520
最近在项目中遇到这样一个问题：利用React.forwardRef与useImperativeHandle实现父组件调用子组件的方法，使用没问题，也能成功实现这一功能，但是当我加入connect后，功能就失效了。度娘了一下看到了这篇文章React.forwardRef和connect的联合使用问题 - 知乎，恍然大悟。 原来是先使用 React.forwardRef;再使用 connect 包一层会使 ref 属性漏掉，导致 内部实例无法传到外部； 这种外部组件是无法获取这个组件内部的实例的。 正..
React.forwardRef和connect的联合使用问题
weixin_45264424的博客
09-18 505
//子组件 let Component = (props)=>{ const {refInstance} = props; // 只要是实例都行useForm和useRef创建的都可以 const [form] = Form.useForm(); useImperativeHandle(refInstance,()=>({ submit:()=>{ form.submit(); } }));
dva.zip_Dva封装_dva_dva/router_react-dva_redux 封装
09-19
react + redux 最佳实践的封装方案，简化使用 redux 和 redux-saga 时很多繁杂的操作
dva-model-persist:类似redux-persist和dva-redux-persist和工具
05-09
之前基于redux-persist@5.*开发的dva-resist-persist，在异步加载model时并不会存贮model的state,所以使用redux的enhancer特性开发这个支持异步model加载的工具 安装教程 yarn add dva-model-persist 或者 npm i -S ...
dva-redux-persist:redux-persist@5.* 的 dva 版
05-10
dva-redux-persistredux-persist@5.* 的 dva 版软件架构适用于 dva umi 项目安装教程yarn add dva-redux-persist或者npm i -S dva-redux-persist使用说明dva示例//src/index.jsimport dva from 'dva';import { ...
dva：:seedling:基于React和redux的轻量级Elm风格框架。 （灵感来自榆树和秋）
02-05
English | dva 基于 ， 和轻量级前端框架。 （灵感来自和） 产品特点 易学易用：仅6个API ，对redux用户非常友好... ：（），基于Ant Design和Dva.js构建的管理仪表板应用程序演示 ：（），Github星级管理应用程序 ：
AWS Certified Developer Exam (DVA-C01) 题库
最新发布
02-26
AWS Certified Developer Exam (DVA-C01) 题库Examshoot公开版
react-redux的connect与React.forwardRef结合ref失效的问题
随风丶逆风的博客
10-14 1782
背景 开发中遇到connect包裹forwardRef组件后，ref引用失效，返回undefined的问题。 const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => { // ... }) export default connect(mapStateToProps, mapDispatchToProps)(CompA); 原因 源码：React.forwardRef 从下面截取的源码中，可
dva开源项目_dva 框架介绍
weixin_36171927的博客
12-23 191
dva 是基于 redux 最佳实践 实现的 framework，简化使用 redux 和 redux-saga 时很多繁杂的操作数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为(副作用)会先触发 Effect...
自定义类组件无法ref的解决方法 React
HiIAN1103的博客
12-23 1943
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 不仅是一个警告，而且完全没有触发ref方法。 React版本：16.8.6 检查需要ref出来的类组件是否使用了redux或dva的connect，如果用了的话在connect内加入{forwardRef:true}： exp...
react 纯函数组件中使用ref属性方法
Meditate_MasterYi的博客
01-17 9010
1.您不能ref在功能组件上使用该属性，因为它们没有实例： 如下 function MyFunctionalComponent() { return ; } class Parent extends React.Component { render() { // This will *not* work! return ( <MyFunctionalCo
react ref无法获取被高阶组件包装的原始组件问题
Broken_Wave的博客
10-31 2787
问题描述： react无法通过ref获取被高阶组件包装的原始组件 通过ref调用被dva connect包裹的组件报错 我们在平时使用ref获取一个组件的引用后，就可以直接通过ref调用组件自身的函数，但是对于高阶组件，使用ref调用原始组件的函数就会报错。 简介： 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种...
初识React(4)：ref属性
菜鸟搬砖记
08-29 907
ref属性其实就是为了获取DOM节点，例如： import React from 'react' class RefComponent extends React.Component { componentDidMount(){ this.inputNode.focus(); } render() { return ( &lt;div&gt;...
【react dva】填坑实录，router 4.0+， less 【一直更新】
Knove的博客
12-07 7549
 · 坑1：路由升级react-dom到16.0.0后，相应的router 也被升级到了4.0以上。以往的路由设置失效。以往：&lt;Route path='/HomeIndex' component={Home}&gt; &lt;IndexRoute component={HomeIndex}/&gt; &lt;Route path='/Home/About' com...
Dva教程
悦分享
05-07 3332
Dva教程 2019千锋DvaJS视频精讲，全网首发！【Web前端】 千锋Web前端教程：01_dva_初始化 (01_dva_初始化&) 01_dva_初始化& 暴露request对象发送请求 其他地方调用query 千锋Web前端教程：02_dva_路由 (02_dva_路由&) 02_dva_路由& 增加路由 增加userPa...
dva和redux有什么不同
04-29
Dva和Redux都是React应用程序中常用的状态管理库，但它们之间有一些重要的区别。 1. 学习难度：Redux相对来说比较难学，需要理解一些概念，例如：store、action、reducer、middleware等。而Dva基于Redux进行封装，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值