React中如何跳过子组件向孙组件传递Props？

1. Props 透传 #

直接把父组件的函数通过 props 传给子组件，子组件无需使用该函数，仅需将其继续作为 props 传递给孙组件即可。

React 示例 #

父组件：

function Parent() {
  const handleAction = () => { /* 业务逻辑 */ };
  return <Child passFunc={handleAction} />;
}

子组件：

function Child({ passFunc }) {
  return <GrandChild action={passFunc} />;
}

孙组件可直接调用 action 对应的函数。

Vue 示例 #

父组件：

<script setup>
const handleAction = () => { /* 业务逻辑 */ };
</script>
<template>
  <Child :pass-func="handleAction" />
</template>

子组件：

<script setup>
defineProps(['passFunc']);
</script>
<template>
  <GrandChild :action="passFunc" />
</template>

2. 框架跨层级传值方案 #

如果组件层级较深，透传 props 过于繁琐，可使用框架自带的跨层级传值能力：

React Context API #

创建 Context，父组件通过 Provider 提供函数，孙组件直接用 useContext 获取，子组件无需参与处理：

// 创建 Context
const ActionContext = React.createContext();

// 父组件
function Parent() {
  const handleAction = () => { /* 业务逻辑 */ };
  return (
    <ActionContext.Provider value={handleAction}>
      <Child />
    </ActionContext.Provider>
  );
}

// 孙组件
function GrandChild() {
  const handleAction = React.useContext(ActionContext);
  return <button onClick={handleAction}>触发操作</button>;
}

Vue Provide & Inject #

父组件用 provide 提供函数，孙组件用 inject 直接获取：

<!-- 父组件 -->
<script setup>
const handleAction = () => { /* 业务逻辑 */ };
provide('actionFunc', handleAction);
</script>
<template>
  <Child />
</template>

<!-- 孙组件 -->
<script setup>
const handleAction = inject('actionFunc');
</script>
<template>
  <button @click="handleAction">触发操作</button>
</template>

3. 状态管理工具 #

大型项目中，可借助 Redux（React）、Pinia（Vue）等状态管理库，将函数或业务逻辑存入 store，孙组件直接从 store 调用即可，无需通过组件层级传递。

• React：官方文档的「Context」章节，详细讲解了跨层级传值的用法，以及 props 透传的最佳实践；
• Vue：官方文档的「Provide / Inject」部分，以及 Pinia 官方文档，均有对应的示例说明；
• 在 Stack Overflow 搜索关键词「pass function from parent to grandchild without using in child」，可找到大量开发者的实际案例和讨论。

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