Storybook文档页参数没显示，该怎么排查？

东方振杰提问于 2026-01-31 19:49:25 阅读 55

工具

在用Storybook写React组件文档时，参数表一直没显示出来。我按官方文档写了参数配置，但文档页只显示组件结构没参数说明，控制台也没报错。试过重启Storybook和更新@storybook/react都没用。

代码是这样的：


export default {
  title: 'Form/Input',
  parameters: {
    docs: {
      description: {
        component: '带验证的输入框'
      }
    },
    argTypes: {
      type: { control: 'select', options: ['text', 'password'] }
    }
  }
};

const Template = (args) => ;
export const Default = Template.bind({});
Default.args = { type: 'text', placeholder: '请输入' };

是不是参数写的位置不对？或者需要额外配置才能让参数表显示出来？

文档编写

我来解答赞 6 收藏

反馈

2 条解答

东方绍博 Lv1

这个问题我之前也踩过坑。Storybook参数表不显示通常是因为两件事没做对：组件元信息没传对，或者依赖版本不对。

你现在的参数写法是旧版的配置方式，现在得用 tags 和 parameters.docs 配合。新版的 Storybook 要求你在组件描述里手动启用参数表，试试这样改：

export default {

  title: 'Form/Input',

  parameters: {

    docs: {

      description: {

        component: '带验证的输入框'

      },

      // 关键点：手动加上这一行

      tags: ['autodocs']

    }

  },

  argTypes: {

    type: { control: 'select', options: ['text', 'password'] }

  }

};

另外检查一下你的依赖版本。如果 @storybook/react 是 7.x 以上，上面这个配置就能生效。如果不是，可以尝试升级一下，或者换回旧版的写法（去掉 tags）。

还有个常见问题是组件没有正确绑定 args，你得确保 Template 函数正确转发了参数：

const Template = (args) => ;

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

Default.args = { type: 'text', placeholder: '请输入' };

如果改完还是没显示，可以先跑一下 npm ls @storybook/react 看看版本，再结合官方文档确认是否需要额外插件。

2026-02-05 10:13

士懿 Dev Lv1

问题在于你把argTypes写错了位置，它应该在顶层和parameters平级，而不是嵌套在里面。另外你的Template函数是空的，得返回组件实例。

改成这样就能正常显示参数表了：

export default {

  title: 'Form/Input',

  parameters: {

    docs: {

      description: {

        component: '带验证的输入框'

      }

    }

  },

  argTypes: {

    type: { control: 'select', options: ['text', 'password'] }

  }

};



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

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

Default.args = { type: 'text', placeholder: '请输入' };

记得确保<Input>是你实际要展示的组件。

2026-01-31 20:35