Callback Props 回调属性

最后更新：2026-10-28

props 不只能传数据，还能传函数。子组件在合适的时机调用父组件传入的回调，把自己的变化「上报」，实现子改父状态——这是 React 单向数据流下子父通信的常规方式。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

// 父：把更新函数作为 prop 传下去
<Counter value={count} onChange={setCount} />

// 子：在合适时机调用回调，把变化"上报"
<button onClick={() => onChange(value + 1)}>+1</button>

onXxx（回调）	父组件传入的函数 prop；子组件调用时可携带参数，把交互结果交回父组件处理。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

居中显示「父组件里的总数」与一个计数按钮；每次点击，按钮文字里的次数加一，上方总数同步更新——子组件经回调修改了父组件的状态。

💡 提示 命名约定：回调 prop 用 on 前缀（onChange），父组件里写的处理函数用 handle 前缀（handleChange）。

ℹ️ 说明 多个组件需要同一份状态时，把状态提升到公共父组件，再配合回调 props 形成完整的双向闭环。

⚠️ 注意 回调函数每次渲染都会新建，配合 memo 优化时记得用 useCallback 包裹稳定引用。

更多案例整理中，敬请期待。

Q 子组件如何修改父组件的状态？

A 父组件把 setState 函数（或包了一层的处理函数）作为 prop 传给子组件，子组件调用它即可触发父组件状态更新。

Q onXxx 和 handleXxx 有什么区别？

A onXxx 命名传给子组件的回调 prop，表示「发生了什么」；handleXxx 命名父组件里真正的处理函数，表示「怎么处理」。

Q 回调 props 会影响性能吗？

A 回调本身开销可忽略；但每次渲染新建的函数引用会让子组件的 memo 失效，深层优化时用 useCallback 固定引用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。