在进行React开发时，函数组件是比较方便的，由于函数组件没有this指针，因此如果想在父组件里调用函数型子组件的方法，就需要用到React.useImperativeHandle 这个帮助函数。

办法要点：

1、在子组件中，使用useImperativeHandle函数将子组件中的方法暴露出去，在导出时使用forwardRef包裹导出的组件；

2、理解 useImperativeHandle 函数的两个参数：
第一个参数ref即是函数组件自带的参数（props,ref）中的 ref。
第二个参数是一个函数，函数返回的对象就是父组件中的 childRef.current

3、需要暴露方法的组件，在导出的时候，一定要加上forwardRef进行包裹

export default forwardRef(Son)

子组件示例：

import React, { useState, forwardRef, useImperativeHandle } from "react"function Son(props, ref) {const [a, setA] = useState(1);const [b, setB] = useState(2);function sonFunc() {console.log("我是儿子中的方法")}useImperativeHandle(ref, () => {return {sonFunc,setA,a: a,b}});return (<div id="headerBox">{a}</div>)
}export default forwardRef(Son)

4、在父组件中使用useRef()，并对子组件进行绑定 ref 。

打印的childRef中有一个属性叫做current，current就是子组件暴露出来的实例句柄。

点击父亲的执行按钮，就可以通过childRef.current.sonFunc()执行子组件的方法sonFun，也可以执行儿子中的改变state的方法setA，从而通过父组件来改变子组件的状态值。

调用者（父组件）示例：

import React, { useState, useRef} from "react";
import Son from "./Son";function Father(props, ref) {const childRef = useRef(null);function printRef() {console.log(childRef );}function doSonFunc() {childRef.current.sonFunc();childRef.current.setA(456);//把子组件中的a从1改变为456}return (<div className="Home"><Son ref={childRef } /><button onClick={printRef}>打印ref</button><button onClick={doSonFunc}>执行儿子的方法</button></div>)
}export default Father

这个方法不仅是可以用来调用儿子的方法，对于儿子的状态属性，也是能够传过来的。

React 函数组件导出自定义方法的办法说明相关推荐

从一个表格render方法问题看React函数组件的更新
从一个表格render方法问题看React函数组件的更新最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下,从这个现象我们能很清楚的看到函数组件的更新的特点,以及我们应该如何去理解和 ...
onclick=两个函数_[译]React函数组件和类组件的差异
[译]React函数组件和类组件的差异原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...
深入学习React函数组件性能优化三剑客useMemo、useCallback、memo
Hook使用规则只能在函数的最外层调用Hook,不能在循环.条件判断或子函数中调用. 只能在React函数组件或自定义Hook中调用Hook,不可在其他JavaScript函数中使用. useMem ...
react函数组件更新自动展示和暴露方法给父组件
react函数组件子组件接收参数变化时form表单自动接收展示在更新数据时,子函数组件接收如组件传递过来的参数进行解析并展示,初始值通过initialValue属性定义. initialValue ...
react 函数组件父组件调用子组件方法
react 函数组件父组件调用子组件方法父组件利用ref对子组件做标记,通过调用子组件方法更改子组件状态,也可以调用子组件方法首先在父组件中 ,使用useRef创建一个ref import Log ...
React函数组件和类组件的区别
定义组件有两个要求: 组件名称必须以大写字母开头组件的返回值只能有一个根元素函数组件函数组件接收一个单一的 props 对象并返回了一个React元素类组件 class Welcome ext ...
react函数组件实现四栏轮播图切换
实现的功能为一个轮播图,分为纵向四栏,切换的时候四部分延迟切换. 主题思想:将底部整体的div分为四部分,纵向四等分,每部分都是当前要展示的图片,通过定位拼接到一起,看起来跟原版的图片一样,给四部分c ...
React 函数组件中无法清除定时器问题
问题: 在离开当前组件页面后,清除定时器,定时器的标识会在一瞬间变为 undefined , 但立马就会又重新开始执行定时器,而且定时器标识不变. 原因: 函数组件的本质是一个函数,而在在一个局部函数 ...
react 函数组件暴露方法
场景部分时候希望在子组件中暴露方法给父组件,使用 Class 组件时配合 ref 很容易拿到子组件实例,并且可以执行子组件上的方法. 但是函数组件没有组件实例,就算使用 ref 转发,也只会把 re ...

React 函数组件导出自定义方法的办法说明

办法要点：

React 函数组件导出自定义方法的办法说明相关推荐

最新文章

热门文章