React Hooks中无需forwardRef()，如何从父组件按需调用子组件方法？

针对React Hooks场景下，不想将子组件改写为forwardRef()形式，但需要父组件按需调用子组件内部方法的需求，这里提供一种基于props传递方法容器的实现方案：

核心思路 #

通过props向子组件传递一个由useRef创建的空对象作为"方法挂载容器"，子组件在内部将需要暴露的方法挂载到这个容器上，父组件就能通过该容器直接访问并调用子组件的内部方法。

修改后的代码实现 #

Child.js

// Child.js
import React from "react";

export default function Child({ methodRef }) {
  const val = "child val";
  const getVal = () => val;

  // 将需要暴露的方法挂载到父组件传入的ref容器中
  React.useEffect(() => {
    if (methodRef) {
      methodRef.current = { getVal };
    }

    // 组件卸载时清空ref，避免内存泄漏和无效调用
    return () => {
      if (methodRef) {
        methodRef.current = null;
      }
    };
  }, [methodRef]);

  return null; // 可根据实际需求渲染子组件内容
}

App.js

// App.js
import Child from "./Child";
import { useRef } from "react";

export default function App() {
  const childMethodsRef = useRef(null);

  const handleCallChildMethod = () => {
    // 调用前做非空判断，避免组件未挂载或卸载后触发报错
    if (childMethodsRef.current?.getVal) {
      console.log(childMethodsRef.current.getVal());
    }
  };

  return (
    <>
      <Child methodRef={childMethodsRef} />
      <button onClick={handleCallChildMethod}>调用子组件方法</button>
    </>
  );
}

方案优势 #

• 无需改写子组件为forwardRef形式，保持子组件的函数组件结构简洁
• 基于React的props数据流传递容器，符合框架设计规范
• 组件卸载时主动清空ref，避免内存泄漏和后续无效调用

注意事项 #

• 父组件传递的methodRef必须是由useRef创建的稳定对象，不要在每次render时新建
• 调用子组件方法前务必做非空判断，防止组件未挂载或已卸载时触发错误

内容的提问来源于stack exchange，提问作者Mr.