React@16.x(30)useImperativeHandle

目录

1,介绍

介绍 ref时提到,ref 不能作用于函数组件,所以有了 ref 转发

举例:

js 复制代码
function Child(props, ref) {
    return <h1 ref={ref}>child</h1>;
}

const ChildWrap = React.forwardRef(Child);

export default function App() {
    const refChild = useRef();
    return (
        <>
            <ChildWrap ref={refChild}></ChildWrap>
            <button
                onClick={() => {
                    console.log(refChild.current);
                }}
            >
                获取Child组件
            </button>
        </>
    );
}

useImperativeHandle 的作用:在 ref 转发的前提下,为了更方便的在函数组件中使用 ref

2,使用

其他代码不变,只对子组件做如下修改:

js 复制代码
function Child(props, ref) {
    useImperativeHandle(
        ref,
        () => {
            return 123; // 相当于 ref.current = 123
        },
        []
    );
    // 此时 h1 上的 ref 失效。
    return <h1 ref={ref}>child</h1>;
}

同样的,依赖项不变,该HOOK的回调函数不会再次执行。

此时在父组件中获取的 refChild.current 就是 123。

所以如果想通过父组件调用子组件的一些方法,可以将这些方法放到 useImperativeHandle 的第2个参数中即可:

js 复制代码
function Child(props, ref) {
    useImperativeHandle(
        ref,
        () => {
            return {
                method1() {
                    console.log("method1");
                },
                method2() {
                    console.log("method2");
                },
            };
        },
        []
    );
    return <h1>child</h1>;
}

父组件调用:refChild.current.method1()


以上。

相关推荐
开心工作室_kaic16 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿35 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro