如何将包含函数的prop传递给每一个{children}子组件？

可以实现，根据你的使用场景可选择以下两种方案：

方案1：遍历children直接注入Props（仅适用于直接子组件场景） #

如果你只需要给<main>下的直接子组件传递函数，可使用React.Children.map配合React.cloneElement遍历注入参数，实现代码如下：

import { Children, cloneElement } from 'react';

// 你的父组件
function YourWrapperComponent({ children, theFunctionYouWantToPass }) {
  // 遍历处理所有children
  const processedChildren = Children.map(children, (child) => {
    // 过滤文本、布尔值等非React元素节点
    if (typeof child === 'object' && child !== null && 'props' in child) {
      // 克隆元素并注入prop，prop名可自定义
      return cloneElement(child, { passedFunc: theFunctionYouWantToPass });
    }
    return child;
  });

  return (
    <>
      <Navbar />
      <main>{processedChildren}</main>
      <Footer />
    </>
  );
}

注意：该方案仅能透传给直接子组件，若子组件内部的后代组件也需要用到该函数，需要逐层手动透传，维护成本较高。

方案2：通过React Context传递（推荐，适用于所有场景） #

如果需要跨层级传递、或者后代组件层数不确定，更推荐使用Context实现，不需要逐层透传，任意层级的后代组件都可以直接拿到函数：

步骤1：创建Context #

import { createContext, useContext } from 'react';

// 创建Context，可传入默认实现
const SharedFuncContext = createContext(() => {
  // 可选：无Provider时的默认逻辑
});

// 封装自定义Hook，方便调用
export const useSharedFunc = () => useContext(SharedFuncContext);

步骤2：改造你的父组件，用Provider包裹 #

function YourWrapperComponent({ children, theFunctionYouWantToPass }) {
  return (
    <SharedFuncContext.Provider value={theFunctionYouWantToPass}>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </SharedFuncContext.Provider>
  );
}

步骤3：后代组件中调用 #

任意被上述父组件包裹的组件，不管层级多深，都可以直接获取函数：

function AnyChildComponent() {
  const passedFunc = useSharedFunc();

  return <button onClick={passedFunc}>点击调用传递的函数</button>;
}

性能优化提示 #

如果你传递的函数是父组件每次渲染时重新生成的，建议用useCallback包裹后再传入Provider，避免触发不必要的组件重渲染。

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