由于 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. Analytics.js简介

    analytics.js JavaScript代码段是一种可用于衡量用户与您网站的互动情况的全新方式.它与之前的跟踪代码ga.js类似,但为开发者自定义实现方案提供了更大的灵活性. analytics ...

  2. Kernel parameter requirements ( Linux DB2)

    Kernel parameter requirements ( Linux DB2) https://www.ibm.com/support/knowledgecenter/SSEPGG_9.7.0/ ...

  3. weblogic初学笔记2－在Linux上部署项目

    一.这两天在做部署项目到Linux服务器上. 网上有用war包部署的,也有把war包解压之后部署的.比如:http://www.cnblogs.com/xdp-gacl/p/4143413.html ...

  4. stm32 硬件错误

    进入该模式,程序死机. 一般来说都是内存错误 1. 数组越界,装入数据溢出, 2. 堆和栈设置不当,这里面硬件的堆和栈在汇编文件中,如果有freertos等,重点检查,任务堆栈使用情况,一般任务堆栈溢 ...

  5. MS14-064 漏洞测试入侵——20145301

    MS14-064 漏洞测试入侵 Microsoft Windows OLE远程代码执行漏洞,OLE(对象链接与嵌入)是一种允许应用程序共享数据和功能的技术 执行摘要 此安全更新可解决 Microsof ...

  6. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

  7. [No0000F5]C# 类（Class）

    当你定义一个类时,你定义了一个数据类型的蓝图.这实际上并没有定义任何的数据,但它定义了类的名称意味着什么,也就是说,类的对象由什么组成及在这个对象上可执行什么操作.对象是类的实例.构成类的方法和变量成 ...

  8. php之函数

    scope(空间) unpack (解压) Traversable (穿越) performance(性能) experiment (检验) properties (属性) trailing (尾随) ...

  9. [redhat][centos] 让不同小版本的CentOS7使用相同的内核版本

    背景: CentOS7有定期的小版本发布,即官网释出的ISO,是带着小版本号的.CentOS7可以使用平滑升级,从这些小版本号中升上去. 但是并不是每一次的更新,都在释出的ISO中,这样的话,一台既有 ...

  10. python进程池爬取下载美女图片（xpath）--lowbiprogrammer

    # -*- coding: utf-8 -*-import requests,osfrom lxml import etreeimport multiprocessingfrom retrying i ...