React Hook父组件获取子组件的数据/函数
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hook的api。
在这里我们需要用到useImperativeHandle
这个api,其函数形式为
useImperativeHandle(ref, createHandle, [deps])
其实这个api也是ref的一种形式,但是相当于做了一定的优化,可以选择让子组件只暴露一定的api给父组件,根据在文档和其他博客上给出的方法,一共有两大步骤:
- 将ref传递到子组件中
- 需要使用forwardRef对子组件进行包装
子组件MyWorldMap
const mapRef = useRef(null);
useImperativeHandle(ref, () => {
return {
//clickSwitch是子组件暴露的函数
clickSwitch() {
if(type == 1){
initChinaMap();
setType(2);
}else{
initWordMap();
setType(1);
}
}
}
})
//你的return内容,注意ref
return(
<React.Fragment>
<div id={"myWorldMap"} style={{ width: "800px", height: "400px" }} ref={mapRef}></div>
</React.Fragment>
)
}
//最后要配合forwardRef
MyWorldMap = forwardRef(MyWorldMap);
export default MyWorldMap;
注:ref是子组件声明的时候传进来的,也就是
function MyWorldMap (props,ref){
//..你的代码
}
//export...
其实官方文档给出来的例子是:
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
两种方法都是可以的
父组件MyTrip
const myWordMapRef = useRef();
return(
//省略一些代码,注意ref
<MyWorldMap proData = { myMapData} handleMapClick = {handleMapClick.bind(this)} ref={myWordMapRef}>
</MyWorldMap>
<div className={styles["mapButton-wrap"]}>
<ButtonGroup>
<Button onClick={() => myWordMapRef.current.clickSwitch()}>Switch</Button>
<Button onClick={()=>clickAll() }>All</Button>
</ButtonGroup>
</div>
)
现在你就可以在父组件里面通过 myWordMapRef.current.clickSwitch()
调用函数了
React Hook父组件获取子组件的数据/函数的更多相关文章
- Vee-validate 父组件获取子组件表单校验结果
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...
- 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法
1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData" 2. 子组件在props中,接收这个方法并声明 props: { onUp ...
- Angular5 父组件获取子组件实例( ViewChildren、ViewChild用法)
原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件 ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
- vue3 template refs dom的引用、组件的引用、获取子组件的值
介绍 通过 ref() 还可以引用页面上的元素或组件. DOM 的引用 <template> <div> <h3 ref="h3Ref">Tem ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
随机推荐
- [AHOI2017初中组]guide
题目描述 农场主John最近在网上买了一辆新车,在购买汽车配件时,John不小心点了两次"提交"按钮.导致汽车上安装了两套GPS系统,更糟糕的是John在使用GPS导航时,两套系统 ...
- iOS app反编译
对于APP store 上的应用都是加密的了,反编译起来有难度. 对于自己用xcode 编译的ipa 或者是其他渠道下载的ipa包都可以使用反编译工具进行反编译. https://cnbin.gith ...
- Hadoop完全分布式集群搭建
Hadoop的运行模式 Hadoop一般有三种运行模式,分别是: 单机模式(Standalone Mode),默认情况下,Hadoop即处于该模式,使用本地文件系统,而不是分布式文件系统.,用于开发和 ...
- checkbox多选框取值
var SelectQuestionAnswer = $("input:checkbox[name='SelectQuestionAnswer']:checked").map(fu ...
- Django 11
目录 功能配置设计 跨站请求伪造CSRF 什么是CSRF 如果实现CSRF 如何避免CSRF CSRF相关的两个装饰器 auth模块 常用方法 扩展auth_user表中的字段 功能配置设计 实现类似 ...
- leetcode-164、最大间距
export default (arr) => { // 如果数组长度小于2返回0 if (arr.length < 2) { return 0 } // 排序 arr.sort() // ...
- CCF-CSP题解 201903-3 损坏的RAID5
先吐槽先吐槽!因为输入太大,需要用fgets,读n个字符或读到回车终止. char *fgets(char *str, int n, FILE *stream) 因为scanf模拟考试T了10+次.因 ...
- 2016/10/21 java中的参数传方式
参考:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html http://www.cnblogs.com/caiyao/p/4964176.html
- MySql全文检索使用详解
实际项目中经常会有一个字段存储多个值用逗号分隔的场景,当分开查询的时候,使用模糊查询会非常影响效率.mysql提供了全文检索函数可以有效解决这一问题: 1.数据结构 ID CODE MSG 1 111 ...
- 数组知识总结(js)
js数组知识注意点: 声明空数组时,和c语言中的不同 js c var arr=[ ] //合法,声明一个空数组,数组长度为0; int a[];//错误因为在c中声明一个数组不仅要指定类型还要指定数 ...