React-Hooks之useImperativeHandle使用，让父组件操纵子组件的状态和方法

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

useImperativeHandle是react官方为了简便我们的ref操作，同时还可以让子组件返回给父组件自身的状态和方法去调用

useRef将ref绑定到某个子组件标签上，用以获取整个子组件的方法和参数
useImperativeHandle: 可以自定义暴露给父组件的方法或者变量

父组件

import React, { useState, useRef } from 'react'
import ChildList from './ChildList'export default () => {let parentRef = useRef(null)const [name, setName] = useState('li')return <div><ChildList parentRef={parentRef} name={name}></ChildList><button onClick={() => {console.log("parentRef", parentRef)}}>获取子组件</button></div>
}

子组件

import React, { useImperativeHandle, forwardRef } from 'react'export default forwardRef((props, ref) => {console.log("ref", ref)useImperativeHandle(ref, () => {return {childFn}})console.log(ref)const childFn = () => {console.log('子组件方法')}return <div><div ref={ref} /></div>
})

用了ref的桥梁就这样就可以在父组件中控制子组件了，而不仅仅只是子随父渲染了。

React-Hooks之useImperativeHandle使用，让父组件操纵子组件的状态和方法相关推荐

【译】什么是React Hooks
原文:What are React Hooks? 作者:Robin Wieruch 译者:博轩 React Hooks 于 2018年10月的React Conf 中引入,作为在 React 函数组件 ...
React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
文章目录一.Wrap 组件二.Expanded 组件三.完整代码示例四.相关资源一.Wrap 组件 Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是 ...
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录一.FractionallySizedBox 组件二.Stack 布局组件三.Positioned 组件四. 完整代码示例五. 相关资源一.FractionallySizedBox ...
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
文章目录一.Flutter 布局相关的组件简介二.Row 和 Column 组件三.SizedBox 组件四.ClipOval 组件五. 完整代码示例六. 相关资源一.Flutter 布 ...
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
文章目录一.PhysicalModel 组件二. 完整代码示例三. 相关资源一.PhysicalModel 组件 PhysicalModel 组件 : 可以将布局显示成不同的形状 , clas ...
【Flutter】StatefulWidget 组件 ( PageView 组件 )
文章目录一.PageView 组件二.PageView 组件完整代码示例三. 相关资源一.PageView 组件 PageView 组件构造函数 : 构造函数中的可选参数就是 PageView ...
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
文章目录一.Image 组件二.TextField 组件三. 相关资源一.Image 组件 Image 组件有多个命名构造函数 , 可以从文件 / 内存 / 网络 / Assets 中加载文 ...
【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )
文章目录一.FloatingActionButton 悬浮按钮组件二.RefreshIndicator 组件三. 相关资源一.FloatingActionButton 悬浮按钮组件 Float ...

React-Hooks之useImperativeHandle使用，让父组件操纵子组件的状态和方法

React-Hooks之useImperativeHandle使用，让父组件操纵子组件的状态和方法相关推荐

最新文章

热门文章