由于 redux是无状态的，所以当我们在子组件中使用了 redux的时候，再父组件中，使用  ref 来获取子组件的state时，发现为一个空对象。

其实这个是有解决方案法的，原因在于 我们使用的 redux里面的 connect 是有四个参数的

前两个经常用，文档也比较多，这里就不说了

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

这里直接说第三个参数，

mergeProps(stateProps, dispatchProps, ownProps) 该参数非必须，redux默认会帮你把更新维护一个新的props对象，类似调用Object.assign({}, ownProps, stateProps, dispatchProps)。

当不想传第三个参数时可以传  null

重点在第四个参数

options, 通过查看源码，可以看见

所以，我们可以在子组件中

父组件中

这样既可获取原来有状态的子组件

react 使用 redux 的时候 用 ref获取子组件的state的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  3. React 函数式组件的 Ref 和子组件访问（useImperativeHandle）

    引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...

  4. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  5. vue--父组件主动获取子组件的方法

    父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...

  6. Vue 父组件主动获取子组件的值，子组件主动获取父组件的值

    父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...

  7. vue父组件获取子组件页面的数组 以城市三级联动为例

    父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...

  8. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  9. vue3 template refs dom的引用、组件的引用、获取子组件的值

    介绍 通过 ref() 还可以引用页面上的元素或组件. DOM 的引用 <template> <div> <h3 ref="h3Ref">Tem ...

随机推荐

  1. [Android实例] Android Studio插件-自动根据布局生成Activity等代码1.4 (开源)（申明：来源于网络）

    [Android实例] Android Studio插件-自动根据布局生成Activity等代码1.4 (开源)(申明:来源于网络) 地址:http://www.eoeandroid.com/thre ...

  2. ASP.NET Core 的Windows和IIS宿主(自动翻译记录)

    https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetcore2x 支持的操作系统 以下操作系统的支持: Win ...

  3. TinyMind 多标签图像分类竞赛 之路

    竞赛传送门:https://www.tinymind.cn/competitions/42 我们就是傻狗天仙配啦~ 决赛排行榜: 这次比赛感谢第一名的 baseline:https://blog.cs ...

  4. 关于servelet入门介绍

    servelet 容器 将前台的请求转发给后台        接受 http 表单, 后台处理操作数据库并且放回用户 .(粗劣) 手工编写第一个Servlet 1, 继承httpservlet 2, ...

  5. JS弹出对话框的三种方式

    JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...

  6. 【单调栈】hdu 6319 杭电多校Problem A. Ascending Rating

    http://acm.hdu.edu.cn/showproblem.php?pid=6319 从后往前更新,维护一个递减单调栈(队列) 最近很多题都是单调栈... #define _CRT_SECUR ...

  7. angularjs 在 iframe 里面无法正确显示 src 指定的内容

    原 controller : $scope.myURL = URL; 页面: <iframe ng-src='{{myURL}}' class="width-100 height-10 ...

  8. PCIe 复位：Clod reset、warm reset、Hot reset、Function level reset

    2015年09月06日 17:06:01 yijingjing17 阅读数:9029 标签: PCIEReSet复位Clod resetwarm reset 更多 个人分类: PCIe        ...

  9. 【基本功】Java动态追踪技术探究 不重启JVM，替换掉已经加载的类？不重启JVM，获知运行时对象的属性

    https://mp.weixin.qq.com/s/_hSaI5yMvPTWxvFgl-UItA 小结: 1.根据Java的类加载机制,在同一个ClassLoader中,类是不允许重复的: 2.单例 ...

  10. python内置函数,lambda表达式,文件读写

    Lambda表达式: lambda是个匿名函数,自动加return返回 a={ 6:2,8:0, 1:4,-5:6,99:11,4:22} print(sorted(a.items()))#按key排 ...