React项目Storybook中Action未在Action面板打印日志的原因

Action面板无日志输出的根本原因，是Storybook注入的Action回调函数从未被真正触发，存在两处实现缺陷：

• Button组件未设计props接收入口：当前组件函数定义没有形参，无法接住父组件（也就是Stories模板）透传的任何参数，包括配置的onClick Action回调。
• 组件内部点击逻辑完全硬编码：组件内部绑定的点击事件只触发固定的alert逻辑，没有预留执行外部传入回调的通道，哪怕Action被正确注入到组件props里，也没有触发的机会。

1. 调整Button组件的实现，支持接收外部props并在点击逻辑中调用传入的回调：

   // Button.jsx
   function Button({ onClick, primary, label }) {
     const clickHandler = (event) => {
       alert('!')
       // 兼容调用外部传入的onClick回调（即Storybook生成的Action函数）
       onClick?.(event)
     }
   
     const buttonStyleClass = primary ? 'button button--primary' : 'button'
     return (
       <button className={buttonStyleClass} onClick={clickHandler}>
         {label}
       </button>
     )
   }
   

2. 确认Stories的参数透传链路正常：当前的Stories模板写法const Template = args => <Button {...args} />本身是正确的，配合argTypes里配置的onClick: { action: 'clicked' }，Storybook会自动把生成的Action回调作为onClick参数传给Button组件，点击按钮时就会在Action面板打印对应日志。

补充注意：如果修复后还是无日志，需要确认本地Storybook对应的@storybook/addon-actions插件已经在.storybook/main.js的addons配置中正常注册，没有被意外移除。

内容的提问来源于stack exchange，提问作者S.W.