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助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。