Storybook 7 中渲染多尺寸组件列表的更优实现方式咨询

你的代码存在两处核心冗余：一是定义了未实际使用的args对象，二是重复编写Button渲染逻辑，同时props与args的参数定义完全重复。以下是几种简洁优雅的优化方案：

方案一：移除冗余参数，循环渲染多尺寸按钮 #

直接抽离尺寸列表，通过循环生成不同尺寸的Button，彻底清理无用的args和重复的props定义：

export const Size: Story = {
  decorators: [
    () => (
      <div className="flex flex-col gap-5">
        {[ButtonSize.SMALL, ButtonSize.MEDIUM, ButtonSize.LARGE, ButtonSize.CONTENT_SIZE].map((size) => (
          <Button key={size} children="Click here" buttonType={ButtonType.PRIMARY} size={size} />
        ))}
      </div>
    ),
  ],
};

方案二：复用args参数，同时保留Controls面板支持 #

如果需要在Storybook的Controls面板中编辑基础参数（比如按钮文字、类型），可以把基础参数放到args中复用，让面板修改同步到所有尺寸的按钮上：

export const Size: Story = {
  args: {
    children: "Click here",
    buttonType: ButtonType.PRIMARY,
  },
  decorators: [
    (Story) => (
      <div className="flex flex-col gap-5">
        {[ButtonSize.SMALL, ButtonSize.MEDIUM, ButtonSize.LARGE, ButtonSize.CONTENT_SIZE].map((size) => (
          <Button key={size} {...Story.args} size={size} />
        ))}
      </div>
    ),
  ],
};

额外优化：抽离尺寸常量（维护性提升） #

如果Button尺寸类型较多，可将尺寸列表抽成独立常量，后续新增或修改尺寸只需调整这一处：

const ALL_BUTTON_SIZES = [ButtonSize.SMALL, ButtonSize.MEDIUM, ButtonSize.LARGE, ButtonSize.CONTENT_SIZE];

export const Size: Story = {
  args: {
    children: "Click here",
    buttonType: ButtonType.PRIMARY,
  },
  decorators: [
    (Story) => (
      <div className="flex flex-col gap-5">
        {ALL_BUTTON_SIZES.map((size) => (
          <Button key={size} {...Story.args} size={size} />
        ))}
      </div>
    ),
  ],
};

内容的提问来源于stack exchange，提问作者lcsaloon