由于 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. ABP之事件总线（2）

    在上一篇文章中,我们复习了一下事件的经典的发布订阅模式,同时对是事件源和时间处理逻辑进行抽象统一,用起来也没有问题.但是还是有很多的问题,比如说我们Handle方法其实是违背了单一性的原则的,里面混杂 ...

  2. Red Hat6设置使用CentOS的yum源

    环境查看 red hat系统使用自己默认的yum源未注册在使用yum安装软件的时候会出现以下错误提示 可以修改成centos的yum源 卸载yum软件 rpm -qa|grep yum|xargs r ...

  3. CentOS7 下安装mysql历程

    一.成功他妈的经历 背景(废话不用看):自己对Linux不是很熟悉,说难听点就是门都没有么到!基于这近年大数据之类的热闹话题,自己就想学习一下!开始下的是Minimal ISO这个版本,Vbox5虚拟 ...

  4. js 去除金额的千位分隔符

    export function delcommafy(num) { if (num != undefined) { num = num.toString(); num = num.replace(/[ ...

  5. EF将IEnumerable<T>类型转换为Dictionary<T,T>类型

    x 无标题 #region 博客Code {DBEntities}生成EFModel的时候自己命名的 using ({DBEntities} db = new { DBEntities }()) { ...

  6. [No0000158]思维模型1-20

    [No0000158]思维模型1-20.7z 思维模型No1|第一性原理 第一原理(又叫第一性原理)是个今年很火的概念,最早由亚里士多德提出,它相当于数学中的公理,即在每一个系统的探索中,存在第一原理 ...

  7. [No000013C]B树、B-树、B+树、B*树

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

  8. zookeeper的Java客户端API

    zookeeper作为一个分布式服务框架,主要用来解决分布式数据一致性问题,对多种语言提供了API.这里主要记录下JAVA客户端API的使用. 1.创建会话 客户端可以通过创建一个ZooKeeper实 ...

  9. 深入理解无穷级数和的定义（the sum of the series）

    Given an infinite sequence (a1, a2, a3, ...), a series is informally the form of adding all those te ...

  10. js Dom对象的属性与方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...