如何在React函数组件中实现与类组件一致的ref调用组件方法功能

云原生阿岚

2026-10-1

React函数组件暴露内部方法给父组件ref的实现方案

你要的需求完全可以实现，只需要配合forwardRef和useImperativeHandle两个React内置API即可。你之前对forwardRef的理解存在偏差，它只是负责转发ref的载体，具体ref绑定的内容可以完全自定义，并非只能绑定DOM元素。

完整实现代码

import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react';

// 用forwardRef包裹子组件，第二个参数接收父组件传的ref
const AnotherComponent = forwardRef((props, ref) => {
  const doSomething = () => console.log('执行子组件方法');

  // 定义要暴露给父组件ref的所有内容
  useImperativeHandle(ref, () => ({
    doSomething,
    // 可自定义暴露任意方法、属性给父组件
  }));

  return <div> There is a content </div>;
});

const MyComponent = () => {
  const newRef = useRef();
  useEffect(() => {
    // 父组件可直接调用子组件暴露的方法
    newRef.current?.doSomething();
  }, []);
  return <AnotherComponent ref={newRef} />;
}