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()


以上。

相关推荐
闲人编程3 分钟前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang4 分钟前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区19 分钟前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木37 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩39 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
Codebee2 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊2 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端