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

本文详解 React 父组件向子组件传递函数时常见的调用失效问题重点说明 onConfirm{props.fn} 与 onConfirm{() props.fn()} 的区别纠正 onConfirm{() {props.fn}} 这一典型错误写法并提供可运行的代码示例与最佳实践。 本文详解 react 父组件向子组件传递函数时常见的调用失效问题重点说明 onconfirm{props.fn} 与 onconfirm{() props.fn()} 的区别纠正 onconfirm{() {props.fn}} 这一典型错误写法并提供可运行的代码示例与最佳实践。在 React 开发中父组件通过 props 向子组件传递函数是实现跨层级交互的核心机制。但一个高频误区是仅将函数引用赋值给事件处理器却未实际调用它。这正是原问题中 confirmFunc 无法执行的根本原因。观察子组件 BasicAlert 的关键代码onConfirm{() {props.confirmFunc}}该写法仅在 onConfirm 触发时「返回函数引用」而并未执行函数体。props.confirmFunc 是一个函数对象如 function() { console.log(1111); }但 {props.confirmFunc} 只是把它当作值返回等同于 return props.confirmFunc; —— 没有括号 ()就没有调用。? 正确做法有两种语义略有不同直接传递函数引用推荐 onConfirm{props.confirmFunc}此时 SweetAlert 组件内部会在用户点击确认时自动调用该函数即 props.confirmFunc()。简洁、高效符合 React 事件处理规范。使用箭头函数显式调用适用于需传参或防抖场景 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。