React Hooks中父组件中调用子组件方法
时间:2019-10-10
本文章向大家介绍React Hooks中父组件中调用子组件方法,主要包括React Hooks中父组件中调用子组件方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
React Hooks中父组件中调用子组件方法
使用到的hooks-- useImperativeHandle,useRef
/* child子组件 */ // https://reactjs.org/docs/hooks-reference.html#useimperativehandle import {useState, useImperativeHandle} from 'react'; ... // props子组件中需要接受ref const ChildComp = ({cRef}) => { const [val, setVal] = useState(); // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用 useImperativeHandle(cRef, () => ({ // changeVal 就是暴露给父组件的方法 changeVal: (newVal) => { setVal(newVal); } })); ... return ( <div>{val}</div> ) }
/* FComp 父组件 */ import {useRef} from 'react; ... const FComp = () => { const childRef = useRef(); const updateChildState = () => { // changeVal就是子组件暴露给父组件的方法 childRef.current.changeVal(99); } ... return ( <> {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */} <ChildComp cRef={childRef} /> <button onClick={updateChildState}>触发子组件方法</button> </> ) }
方法二、参考react官方文档:
import {useState, useImperativeHandle,forwardRef} from 'react'; // props子组件中需要接受ref const ChildComp = (props,refs) => { // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用 useImperativeHandle(ref, () => ({ // changeVal 就是暴露给父组件的方法 changeVal: (newVal) => { } })); return ( <div>{val}</div> ) } ChildComp = forwardRef(ChildComp)
/* FComp 父组件 */ import {useRef} from 'react'; const FComp = () => { const childRef = useRef(); const updateChildState = () => { // changeVal就是子组件暴露给父组件的方法 childRef.current.changeVal(99); } return ( <> <ChildComp ref={childRef} /> <button onClick={updateChildState}>触发子组件方法</button> </> ) }
原文地址:https://www.cnblogs.com/muamaker/p/11647626.html
- Golang语言--【社区推荐阅读】 fmt用法
- 一个SQL性能问题的优化探索(一)(r11笔记第33天)
- HDUOJ-----1074 Integer Inquiry
- PXE无人值守安装Linux
- HDUOJ-----Robot Motion
- 对康托展开的一些心得...
- MySQL 5.7 General Tablespace学习(r11笔记第34天)
- Veeam Backup & Replication(一):安装及配置
- HDUOJ-----Computer Transformation
- Veeam Backup & Replication(二):添加虚拟化主机和配置备份存储
- HDUOJ 2672---god is a girl 《斐波那契数》
- Golang语言--一些基础用法
- 复杂SQL性能优化的剖析(一)(r11笔记第36天)
- hduoj1073--Online Judge
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法