useImperativeHandle 父组件调用子组件方法

最新推荐文章于 2025-01-20 16:25:24 发布

天不生我鹤暮辞

最新推荐文章于 2025-01-20 16:25:24 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/userNing/article/details/129267402

该文章介绍了如何在React应用中通过`useRef`和`useEffect`在父组件中获取子组件的引用，并利用`useImperativeHandle`和`forwardRef`来定义子组件的方法，使得父组件可以调用这些方法。示例代码展示了具体的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入子组件

将ref传递过去

import React, { useEffect, useRef } from "react";
import Child from './components/Child'
import { connect } from "dva";
export default connect(state => {
    return {

    }
})(Impera)
// 父组件调用子组件方法
function Impera(props) {
    const ref = useRef()

    useEffect(() => {
        console.log('ref', ref);
        ref.current.onClick()
    }, [])
    return (
        <div>
            <Child ref={ref} />
        </div>
    )
}

引入useImperativeHandle和forwardRef

函数内是要调用的方法

import React, { forwardRef, useImperativeHandle } from "react";
export default forwardRef(Child)

function Child(props, ref) {

    const onClick = () => {
        console.log('我是子组件');
    }
    useImperativeHandle(ref, () => ({
        focus: () => {
            console.log('我是子组件的ref');
        },
        onClick,
    }), [])
    return (
        <div>

        </div>
    )
}