[前端-React] 在函数组件中使用ref实现子传父

最新推荐文章于 2025-12-03 20:49:19 发布

原创最新推荐文章于 2025-12-03 20:49:19 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js #javascript

本文介绍了如何在React中使用useRef和useImperativeHandle实现父组件与子组件之间的值传递，通过forwardRef将子组件暴露给父组件，以便调用特定方法获取子组件的值。

父组件：

import React, { useRef } from "react";
import ChildComponent from "...";

export default function FatherComponent() {
    const childRef = useRef(null);

    const getValue = () => {
        // 调用子组件获取value的function
        const value = childRef.current.childGetValueFunction();
        console.log('value', value);
    }

    return (
        <>
            <ChildComponent ref={childRef}/>
            <button onClick={getValue}>获取子组件的value</button>
        </>
    );
}

子组件：

import React, { forwardRef, useImperativeHandle } from "react";

function ChildComponent(props, ref) {
    const getValueFunc = () => {
        // 获取value值
        const value = '123';
        return value;
    }

    useImperativeHandle(ref, () => ({
        childGetValueFunction: () => getValueFunc,
    }),[/*Dependency items*/]);

    return (
        <div>Child Component</div>
    )
}

export default forwardRef(ChildComponent);