由于 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. css学习_css三大特性

    css三大特性 1.层叠性(就近原则) 2.继承性(和文字有关的会继承) 3.优先级   (权重问题) 权重:0,0,0,0 0001 ---标签选择器(注意:即使有20个标签选择器也不会比一个伪类选 ...

  2. ASP.NET Core 2.0 Preview 1 中贴心的新特性

    西雅图时间5月10日,微软在 Build 2017 大会上发布了 ASP.NET Core 2.0 Preview 1 ( 详见 Announcing ASP.NET 2.0.0-Preview1 a ...

  3. vim与程序员 vi/vim 的使用

    vim与程序员   所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以 ...

  4. MySQL5.6的4个自带库详解

    MySQL5.6的4个自带库详解 1.information_schema详细介绍: information_schema数据库是MySQL自带的,它提供了访问数据库元数据的方式.什么是元数据呢?元数 ...

  5. 淘宝NPM镜像cnpm

    # 安装cnpm命令 npm install -g cnpm --registry=https://registry.npm.taobao.org2.cnpm install

  6. PHP利用反射根据类名反向寻找类所在文件

    有时候分析源码时,会被博大精深的层层代码搞得晕头转向,不知道类是定义在哪个文件里的,有时候IDE所提供的方法声明未必准确.在这种情况下,我们可以利用反射找到类所在的文件. 在你发现实例化类的地方(例如 ...

  7. 用户定义的java计数器

    mapreduce 计数器用来做某个信息的统计. 计数器是全局的.mapreduce 框架将跨所有map和reduce聚集这些计数器,并且作业结束时产生一个最终的结果. 语法像 java 的 enum ...

  8. [No0000120]Python教程3/9-第一个Python程序

    现在,了解了如何启动和退出Python的交互式环境,我们就可以正式开始编写Python代码了. 在写代码之前,请千万不要用“复制”-“粘贴”把代码从页面粘贴到你自己的电脑上.写程序也讲究一个感觉,你需 ...

  9. confd

    1.下载安装confd ]# wget https://github.com/kelseyhightower/confd/releases/download/v0.15.0/confd-0.15.0- ...

  10. mysql 事务队列 写入 幂等性 重复写入

    mysql  事务队列   写入 幂等性  重复写入