如何在自定义Hook中调用组件内部的函数？

假设你的MyComponent内部会使用useHook-A，以下是几种不需要导出函数、也不需要通过组件props传递的实现方式：

方案1：将函数作为Hook的参数传入 #

虽然你提到不能作为props传递，但可以在组件内部调用Hook时直接把myFunction作为参数传给Hook，这不属于组件props传递的范畴：

const MyComponent = () =>{
  const myFunction = () =>{
    console.log("组件内的函数被调用了");
  }
  // 调用Hook时传入函数
  useHookA(myFunction);

  return <div>My Component</div>
}
export default MyComponent

const useHookA = (callback) =>{
  // 在需要的地方调用传入的函数
  const triggerFunction = () =>{
    if(callback){
      callback();
    }
  }

  // 示例：点击按钮触发（可根据业务场景调整触发时机）
  return <button onClick={triggerFunction}>调用组件内函数</button>
}
export default useHookA

方案2：使用Ref保存函数，Hook通过Ref访问 #

如果不想直接传函数，可以用useRef在组件中保存函数的引用，再把这个ref传给Hook：

import { useRef, useEffect } from 'react';

const MyComponent = () =>{
  const funcRef = useRef();
  const myFunction = () =>{
    console.log("组件内的函数被调用了");
  }

  // 每次渲染更新ref的current值，避免闭包问题
  useEffect(() =>{
    funcRef.current = myFunction;
  }, [myFunction]);

  // 将ref传给Hook
  useHookA(funcRef);

  return <div>My Component</div>
}
export default MyComponent

const useHookA = (funcRef) =>{
  const trigger = () =>{
    // 调用ref中保存的函数
    if(funcRef.current){
      funcRef.current();
    }
  }

  return <button onClick={trigger}>触发函数</button>
}
export default useHookA

方案3：通过状态驱动触发函数 #

如果连ref都不想传，可以用状态变化来触发组件内的函数执行：

import { useState, useEffect } from 'react';

const MyComponent = () =>{
  const [shouldRun, setShouldRun] = useState(false);
  const myFunction = () =>{
    console.log("组件内的函数被调用了");
  }

  // 监听状态变化，当shouldRun为true时执行函数
  useEffect(() =>{
    if(shouldRun){
      myFunction();
      // 执行后重置状态，避免重复触发
      setShouldRun(false);
    }
  }, [shouldRun, myFunction]);

  // 把状态修改方法传给Hook，让Hook能触发状态变化
  useHookA(setShouldRun);

  return <div>My Component</div>
}
export default MyComponent

const useHookA = (setShouldRun) =>{
  const trigger = () =>{
    // 通过修改状态触发组件内的函数执行
    setShouldRun(true);
  }

  return <button onClick={trigger}>触发函数</button>
}
export default useHookA

注意事项 #

• 如果myFunction内部依赖组件的状态或props，要注意闭包问题：方案1和方案3需确保传入Hook的函数或依赖项是最新的；方案2通过useEffect更新ref的方式可避免闭包问题。
• 若useHook-A和MyComponent完全分离（组件内部不调用Hook），这种场景下无法直接调用组件内的局部函数，除非使用全局事件总线（不推荐，会增加代码耦合）。

内容的提问来源于stack exchange，提问作者ali safaeyan