react 使用 redux 的时候 用 ref获取子组件的state
由于 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的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- React Hook父组件获取子组件的数据/函数
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...
- React 函数式组件的 Ref 和子组件访问(useImperativeHandle)
引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- vue--父组件主动获取子组件的方法
父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- vue3 template refs dom的引用、组件的引用、获取子组件的值
介绍 通过 ref() 还可以引用页面上的元素或组件. DOM 的引用 <template> <div> <h3 ref="h3Ref">Tem ...
随机推荐
- Windows NTFS 符号链接 与 Linux 软连接
Windows NTFS 符号链接又称“符号链接”==================================== F:\>mklink /d Link_d Target 为 Link ...
- myEclipse异常:Subversion Native Library Not Available
参考文档:https://blog.csdn.net/zp357252539/article/details/44880319 Subversion Native Library Not Availa ...
- GIAC深圳站 | 2018年不可错过的全球互联网架构大会!
2018年6月1~2日,GIAC 全球互联网架构大会将于深圳华侨城洲际酒店举行!GIAC全球互联网架构大会是由msup和高可用架构技术社区联合举办的面向架构师.技术负责人及高端技术从业人员的技术架构大 ...
- Codeforces 44E - Anfisa the Monkey - [水题]
题目链接:http://codeforces.com/problemset/problem/44/E 题意: 给一个字符串,让你分割成 $k$ 行,每行的字母数在 $[a,b]$ 之间. 题解: 这是 ...
- [No0000111]java9环境变量配置bat
保存成bat(utf-8 无签名 编码) 右键以管理员权限运行 修改JAVAINSTALLPATH 为JAVA SDK 安装目录(默认用C:\PROGRAM FILES\JAVA\)即可: 只在 用户 ...
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- JavaScript:改变 HTML 图像
JavaScript:改变 HTML 图像 1.代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- radio样式的写法,单选和多选如何快速的改变默认样式,纯CSS,
一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...
- 【pyqtgraph绘图】案例-动态的正余弦波形图
先看一个简单的小例子: 完整代码: import numpy as np import pyqtgraph as pg import sys from PyQt5.QtWidgets import Q ...
- es手动创建索引,修改索引,删除索引
1.创建索引 创建索引的语法PUT /my_index{ "settings": { ... any settings ... }, "mappings": { ...