由于 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. JVM源码分析之栈溢出完全解读

    概述 之所以想写这篇文章,其实是因为最近有不少系统出现了栈溢出导致进程crash的问题,并且很隐蔽,根本原因还得借助coredump才能分析出来,于是想从JVM实现的角度来全面分析下栈溢出的这类问题, ...

  2. amcharts去除版权标志

    打开amcharts.js, 查找drb, 找到后,将drb:function(){......}程序{}中间内容清空, 或者改成drb:function(){return;}

  3. Steeltoe之Config客户端篇

    Steeltoe是一款开源项目,其目标是选取源自Netflix及其它公司的工具,使它们能够运用于.NET社区.它不仅可以在.NET Core上,也可以在.NET Framework 4.X以上使用.此 ...

  4. 终于知道什么情况下需要实现.NET Core中的IOptions接口

    自从接触 IOptions 之后,一直纠结这样的问题:自己定义的 Options 要不要实现 IOptions 接口. 微软有的项目中实现了,比如 Caching 中的 MemoryCacheOpti ...

  5. 【每日一题】 UVA - 1588 Kickdown

    题意:uva的题,每道都是有背景的orz,都是阅读理解 题解:暴力模拟,拿着短的那个串,对着长的一格一格往左滑,每滑一格暴力扫一遍.然后再从头往右滑,我这里wa了三发,wa了后习惯性瞎改,改到后来循环 ...

  6. spark学习笔记3

    Spark 支持在集群范围内将数据集缓存至每一个节点的内存中,可避免数据传输,当数据需要重复访问时这个特征非常有用,例如查询体积小的“热”数据集,或是运行如 PageRank 的迭代算法.调用 cac ...

  7. DBCHART读取X、Y、LABEL值

    1.把MOUSE移到某一条SERIES上时,显示该点的值 procedure Tzl1Form.DBChart1ClickSeries(Sender: TCustomChart;  Series: T ...

  8. LeetCode 429 N-ary Tree Level Order Traversal 解题报告

    题目要求 Given an n-ary tree, return the level order traversal of its nodes' values. (ie, from left to r ...

  9. Eclipse实用小插件

    MyBatipse插件 描述 用于mybatis的Dao层或者mapper层的方法直接跳到对应的xml文件对应的方法 安装 进入IDE(eclipse)的Help——>Install New S ...

  10. 在Java程序中读写windows共享文件夹

    摘要 使用Java通过JCIFS框架读写共享文件夹,使用SMB协议,并支持域认证. 项目常常需要有访问共享文件夹的需求,例如读取共享文件夹存储的视频.照片和PPT等文件.那么如何使用Java读写Win ...