React 中父组件向子组件传递函数的正确调用方式

本文详解 React 父子组件间函数传递的关键细节，重点纠正 onConfirm={() => {props.confirmFunc}} 这类常见错误写法，说明为何函数未执行，并给出两种正确调用方式（直接传函数引用或箭头函数调用），附可运行示例与最佳实践建议。 本文详解 react 父子组件间函数传递的关键细节，重点纠正 `onconfirm={() => {props.confirmfunc}}` 这类常见错误写法，说明为何函数未执行，并给出两种正确调用方式（直接传函数引用或箭头函数调用），附可运行示例与最佳实践建议。在 React 中，父组件向子组件传递函数是实现状态提升与交互控制的核心模式。但一个高频陷阱是：函数被成功传递（props 中可打印验证），却在子组件事件触发时未实际执行。问题根源往往不在传递过程，而在于子组件中对函数的调用方式不正确。以你提供的代码为例，父组件 CommonCodeMgmt 正确声明了 confirmFunc 并通过 confirmFunc={confirmFunc} 传入 BasicAlert 子组件：setAlert(<BasicAlert confirmFunc={confirmFunc} />);但在子组件 BasicAlert 的 SweetAlert 中，onConfirm 的写法存在致命错误：// ? 错误：仅引用函数，未调用onConfirm={() => {props.confirmFunc}}该写法创建了一个新函数，其返回值是 props.confirmFunc 函数本身（而非执行它），且该返回值未被任何地方消费------onConfirm 回调期望的是"执行副作用"，而非"返回一个函数"。因此点击确认按钮后，控制台无输出，console.log('1111') 从未触发。? 正确做法有两种，均需确保函数被立即调用： WisPaper 复旦大学研发的AI学术搜索工具，5分钟内筛选1000篇论文