React中如何向父组件传递函数？有哪些可行的实现方案？

该需求完全可以通过Context API实现，传递函数的逻辑和传递静态数据没有本质区别，只需要把需要全局调用的函数统一封装到Context的value中即可，具体实现步骤如下：

1. 新建全局函数与Context配置文件 #

创建单独的文件存放全局函数和Context配置，比如src/utils/globalFunctions.js，示例代码如下：

import { createContext, useContext } from 'react';

// 定义所有需要全局使用的无状态函数
const staticGlobalFunctions = {
  // 示例：通用提示方法
  showToast: (msg) => {
    alert(msg);
  },
  // 示例：通用表单提交方法
  submitForm: async (formData, apiPath) => {
    const res = await fetch(apiPath, {
      method: 'POST',
      body: formData
    });
    return res.json();
  },
  // 其余自定义函数均可直接添加到此处
}

// 创建Context，默认值为上述函数集合
const GlobalFunctionContext = createContext(staticGlobalFunctions);

// 封装自定义调用Hook，简化后续组件内的调用逻辑
export const useGlobalFunctions = () => useContext(GlobalFunctionContext);

// 导出Provider组件，用于根节点注册
export const GlobalFunctionProvider = ({ children }) => {
  return (
    <GlobalFunctionContext.Provider value={staticGlobalFunctions}>
      {children}
    </GlobalFunctionContext.Provider>
  )
}

2. 根组件注册Provider #

在项目入口文件（通常是App.jsx或main.jsx）中使用Provider包裹整个应用，示例代码如下：

import { GlobalFunctionProvider } from './utils/globalFunctions';

function App() {
  return (
    <GlobalFunctionProvider>
      {/* 原有应用的所有根组件、路由配置都放在Provider内部 */}
      <div className="app-container">
        <Home />
        <Admin />
      </div>
    </GlobalFunctionProvider>
  )
}

export default App;

3. 任意组件内调用全局函数 #

无论父组件、子组件还是跨层级的后代组件，都可以直接通过自定义Hook调用全局函数，不需要通过props传递，示例代码如下：

import { useGlobalFunctions } from '../utils/globalFunctions';

function ChildForm() {
  // 直接取出需要的全局函数
  const { showToast, submitForm } = useGlobalFunctions();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // 直接调用全局函数
    const result = await submitForm(formData, '/api/commit');
    if(result.code === 200) {
      showToast('提交成功');
    }
  }

  return <form onSubmit={handleSubmit}>
    {/* 表单内容 */}
    <button type="submit">提交</button>
  </form>
}

export default ChildForm;

注意事项 #

• 如果全局函数需要依赖应用内的动态状态（比如用户token、全局主题配置等），可以将函数定义移到Provider内部，配合useState/useCallback使用，避免不必要的重渲染，示例如下：

import { useState, useCallback } from 'react';

export const GlobalFunctionProvider = ({ children }) => {
  const [userToken, setUserToken] = useState(localStorage.getItem('user_token'));
  
  // 用useCallback缓存函数，仅当依赖的token变化时才更新函数
  const getAuthInfo = useCallback(async () => {
    const res = await fetch('/api/user/info', {
      headers: {
        Authorization: `Bearer ${userToken}`
      }
    });
    return res.json();
  }, [userToken])

  const functionCollection = {
    getAuthInfo,
    showToast: (msg) => alert(msg)
  }

  return (
    <GlobalFunctionContext.Provider value={functionCollection}>
      {children}
    </GlobalFunctionContext.Provider>
  )
}

• 如果所有函数都是无依赖的纯工具函数，也可以直接导出函数集合，不需要使用Context，在组件顶部直接import调用即可，Context方案更适合需要绑定动态状态的函数场景。

内容的提问来源于stack exchange，提问作者Al Zahid