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篇论文