本文详解 React 中父子组件间函数传递的常见误区与正确实践，重点解决因事件回调未执行导致父函数不被调用的问题，涵盖 onConfirm 等事件处理器的两种标准写法及注意事项。
本文详解 react 中父子组件间函数传递的常见误区与正确实践，重点解决因事件回调未执行导致父函数不被调用的问题，涵盖 `onconfirm` 等事件处理器的两种标准写法及注意事项。
在 React 应用中，将父组件定义的函数安全、可靠地传递给子组件并确保其被正确触发，是组件通信的基础能力。但实践中一个高频错误是：函数虽成功传入 props，却因事件处理器写法不当而未实际执行。如问题所示，父组件中定义了 confirmFunc，并通过 <BasicAlert confirmFunc={confirmFunc} /> 传入子组件；但在子组件中使用 onConfirm={() => {props.confirmFunc}} 时，函数仅被引用，却未被调用——这导致点击确认按钮后控制台无输出，逻辑中断。
✅ 正确写法一：直接赋值为事件处理器（推荐）
当父函数无需额外参数且签名匹配事件回调（如 () => void）时，最简洁、高效的方式是直接将函数引用赋给事件属性：
// 子组件 BasicAlert.jsx
<SweetAlert
onConfirm={props.confirmFunc} // ✅ 正确：React 自动在事件触发时调用该函数
// 其他 props...
>
del
</SweetAlert>这种方式语义清晰、性能更优（避免每次渲染创建新箭头函数），且符合 React 官方推荐模式（见 Responding to Events）。
✅ 正确写法二：内联调用（需显式执行）
若需在调用前添加逻辑、或需向父函数传参，则应使用箭头函数并显式加括号执行：
// ❌ 错误：仅引用，未调用
onConfirm={() => props.confirmFunc}
// ✅ 正确：立即执行
onConfirm={() => props.confirmFunc()}
// ✅ 正确（带参数示例）
onConfirm={() => props.confirmFunc('delete', params.data.id)}⚠️ 注意：onConfirm={() => {props.confirmFunc}} 中的大括号内仅为表达式求值，等价于 return props.confirmFunc;，返回的是函数本身而非执行结果，因此不会触发副作用（如 console.log）。
? 补充验证建议
- 检查 props 是否接收成功：在子组件开头添加 console.log('Received props:', props)，确认 confirmFunc 是一个函数（typeof props.confirmFunc === 'function'）；
-
避免闭包陷阱：若 confirmFunc 依赖父组件状态（如 alert），建议用 useCallback 包裹以保证稳定性：
const confirmFunc = useCallback(() => { console.log('Confirmed!'); setAlert(null); }, [setAlert]); -
子组件应做防御性校验（可选但健壮）：
onConfirm={() => typeof props.confirmFunc === 'function' && props.confirmFunc()}
总结
函数传递本身无错，关键在于事件处理器的调用时机与方式。始终牢记：
- onConfirm={handler} → React 在用户交互时自动调用 handler()；
- onConfirm={() => handler()} → 手动封装调用，适用于需前置逻辑或传参场景；
- onConfirm={() => handler} → ❌ 无效，仅返回函数引用，不执行。
遵循此原则，即可彻底规避“函数传进去了却不运行”的典型问题，构建健壮、可维护的 React 组件通信体系。
