Storybook中Args参数没有显示在控件面板，怎么解决？

W″梓涵提问于 2026-02-14 23:40:29 阅读 11

工具

我在用Storybook写按钮组件的故事时遇到了问题。按照文档设置了args参数和argTypes，但控件面板里完全看不到这些参数选项。比如我给primary属性设置了boolean类型，但点击”Controls”还是空白。已经试过重启Storybook和清除缓存，还是没用。

故事文件代码是这样的：

export default {
  title: 'Button',
  component: Button,
  args: { label: 'Click me', primary: true },
  argTypes: {
    primary: { control: 'boolean' },
  },
};

export const Primary = () => <Button />;

组件本身用的是TypeScript，props里确实有primary属性。是不是哪里配置漏了？

Args参数

我来解答赞 6 收藏

反馈

2 条解答

晓英（打工版） Lv1

这个问题挺常见的，其实主要原因是你的故事函数没有正确接收和使用 args 参数。Storybook 的 Controls 面板依赖于你在故事中实际使用了这些 args，如果 args 没有被传递到组件里，控件是不会显示的。

通用的做法是确保你的故事函数接收 args 并把它传给组件。下面是修改后的代码：

export default {

  title: 'Button',

  component: Button,

  args: { label: 'Click me', primary: true },

  argTypes: {

    primary: { control: 'boolean' },

  },

};



export const Primary = (args) => <Button {...args} />;

这里的关键点是把 Primary 函数改成接收 args 参数，并通过解构的方式把它传给 Button 组件。这样 Storybook 才能检测到你确实用到了这些参数，从而在 Controls 面板里显示它们。

还有一点需要注意，如果你的项目用的是 TypeScript，可能需要显式声明 args 的类型，比如：

export const Primary: Story<ButtonProps> = (args) => <Button {...args} />;

这样可以避免类型检查报错，同时让 Storybook 更好地推断参数类型。

最后提醒一下，有时候即使改对了代码，也可能因为缓存问题看不到效果。虽然你已经试过重启 Storybook，但建议再删除一次 .storybook 目录下的缓存文件，或者直接删掉 node_modules/.cache 目录，确保万无一失。

按照这个方式调整后，你的 Controls 面板应该就能正常显示参数了。

2026-02-17 21:09

シ世杰 Lv1

你这个问题主要是因为故事的写法有点小问题，Storybook 的 args 没有正确绑定到组件实例上。按照你的代码，Primary 故事是一个箭头函数返回 JSX，这种方式下 Storybook 无法自动把 args 注入到组件里。

更好的写法是使用模板函数的方式，让 Storybook 能够正确处理 args 和 argTypes。改一下你的代码：

export default {

  title: 'Button',

  component: Button,

  args: { label: 'Click me', primary: true },

  argTypes: {

    primary: { control: 'boolean' },

  },

};



const Template = (args) => <Button {...args} />;



export const Primary = Template.bind({});

Primary.args = {};

这里的关键是用了一个 Template 函数来包裹组件，并通过解构的方式把 args 传递给 Button。然后用 Template.bind({}) 创建具体的故事实例，这样 Storybook 就能正确识别和显示控件了。

另外，如果你的项目是用 TypeScript 写的，确保 Button 的 props 类型定义和 argTypes 是匹配的。如果类型不一致，也可能导致控件面板无法正常渲染。

最后一个小提醒，检查一下你的 Storybook 版本是不是最新的，有些老版本可能存在 bug，升级到最新版通常能解决很多奇怪的问题。

改完之后重启一下 Storybook，应该就能在控件面板看到 primary 参数了。如果还有问题，可以再看看是不是其他配置影响了控件的显示。

2026-02-15 01:02