如何在 React 中正确将父组件函数传递给子组件并触发调用

本文详解 React 中父子组件间函数传递的常见误区与正确实践，重点解决因事件回调未执行导致父函数不被调用的问题，涵盖 onConfirm 等事件处理器的两种标准写法及注意事项。 本文详解 react 中父子组件间函数传递的常见误区与正确实践，重点解决因事件回调未执行导致父函数不被调用的问题，涵盖 `onconfirm` 等事件处理器的两种标准写法及注意事项。在 React 应用中，将父组件定义的函数安全、可靠地传递给子组件并确保其被正确触发，是组件通信的基础能力。但实践中一个高频错误是：函数虽成功传入 props，却因事件处理器写法不当而未实际执行。如问题所示，父组件中定义了 confirmFunc，并通过 <BasicAlert confirmFunc={confirmFunc} /> 传入子组件；但在子组件中使用 onConfirm={() => {props.confirmFunc}} 时，函数仅被引用，却未被调用——这导致点击确认按钮后控制台无输出，逻辑中断。? 正确写法一：直接赋值为事件处理器（推荐）当父函数无需额外参数且签名匹配事件回调（如 () => void）时，最简洁、高效的方式是直接将函数引用赋给事件属性：// 子组件 BasicAlert.jsx<SweetAlert onConfirm={props.confirmFunc} // ? 正确：React 自动在事件触发时调用该函数 // 其他 props...> del</SweetAlert>这种方式语义清晰、性能更优（避免每次渲染创建新箭头函数），且符合 React 官方推荐模式（见 Responding to Events）。? 正确写法二：内联调用（需显式执行）若需在调用前添加逻辑、或需向父函数传参，则应使用箭头函数并显式加括号执行： Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。