本文详解 React 父子组件间函数传递的关键要点：必须确保子组件中通过 props 接收的函数被正确调用（而非仅引用），否则事件触发时函数不会执行；重点解析 onConfirm={props.fn} 与 onConfirm={() => props.fn()} 的等效性及常见错误。
本文详解 react 父子组件间函数传递的关键要点：必须确保子组件中通过 props 接收的函数被**正确调用**（而非仅引用），否则事件触发时函数不会执行；重点解析 `onconfirm={props.fn}` 与 `onconfirm={() => props.fn()}` 的等效性及常见错误。
在 React 应用开发中，父组件向子组件传递函数是实现状态控制与行为委托的核心模式。但一个高频错误是：将函数作为 prop 传递后，在子组件事件处理器中仅引用而未调用，导致点击等交互无任何响应——这正是本例中 confirmFunc 未打印 '1111' 的根本原因。
? 错误写法分析
在子组件 BasicAlert 中，原始代码为：
onConfirm={() => {props.confirmFunc}}
该写法创建了一个箭头函数，其函数体仅返回 props.confirmFunc 函数对象本身，并未执行它。相当于：
onConfirm={() => function confirmFunc() { console.log('1111'); }}
此时 onConfirm 的值是一个返回函数的函数，而非可执行的副作用逻辑，因此点击确认按钮毫无反应。
✅ 正确写法（两种等效方案）
方案一：直接传递函数引用（推荐）
onConfirm={props.confirmFunc}
✅ 优点：简洁、性能更优（避免创建额外闭包）、语义清晰（明确将 confirmFunc 绑定为 onConfirm 的处理函数）。
⚠️ 前提：confirmFunc 内部不依赖 this 或需绑定上下文（函数组件中通常无需 bind）。
方案二：在内联箭头函数中显式调用
onConfirm={() => props.confirmFunc()}
✅ 优点：可安全传参、支持异步逻辑封装、便于添加前置判断（如 if (valid) props.confirmFunc()）。
⚠️ 注意：每次渲染都会创建新函数，若用于 useCallback 依赖项或子组件 memo 比较，可能影响性能（本例无此需求，可接受）。
? 完整修正后的子组件代码
import React from "react";
import SweetAlert from "react-bootstrap-sweetalert";
export const BasicAlert = ({ confirmFunc }) => {
// 解构 props 更清晰，且避免重复 props.xxx
console.log("BasicAlert received confirmFunc:", confirmFunc);
return (
<sweetalert warning style="{{" display: margintop: title="del" onconfirm="{confirmFunc}" confirmbtnbsstyle="info" cancelbtnbsstyle="danger" confirmbtntext="doing" cancelbtntext="cancel" showcancel>
del
</sweetalert>
);
};
⚠️ 注意事项与最佳实践
- 不要在 JSX 属性中写 onConfirm={() => props.fn}（缺少 ()），这是最典型的“静默失败”陷阱；
- 若父组件函数依赖 useState 或 useEffect 中的变量，请确保其已通过 useCallback 正确记忆化，避免子组件不必要的重渲染；
- 在函数组件中，props 是普通对象，解构赋值（如 { confirmFunc }）比 props.confirmFunc 更易读且利于 ESLint 检查；
- 使用 React DevTools 检查子组件 props，确认 confirmFunc 是否为 function 类型而非 undefined，可快速定位传递链断裂问题。
掌握这一基础却关键的细节，能显著提升 React 组件通信的可靠性与可维护性。
