如何使用 Storybook 将多个组件添加到一个故事中？

Question

我刚刚开始使用故事书，我需要你的帮助。我有四个用于不同图标的组件，我想为所有图标创建一个故事，而不是为每个图标创建故事。

我有 AllIcons.stories.tsx 文件，在这个文件中我有这个：

问题是我不知道需要在导出默认对象中添加什么组件。

export default {
  title: "Icon",
  component: ListIcons,
} as Meta;

export const InterviewEndIconStory = (args: InterviewEndIconProps) => (
  <InterviewEndIcon {...args} />
);

export const RunCodeIconStory = (args: RunCodeIconProps) => (
  <RunCodeIcon {...args} />
);

export const TemplateEditIconStory = (args: TemplateEditIconProps) => (
  <TemplateEditIcon {...args} />
);

export const VideoOffIconStory = (args: VideoOffIconProps) => (
  <VideoOffIcon {...args} />
);

Answer 1

您可以简单地将所有按钮渲染到单个反应片段中，以便将所有按钮捆绑到单个故事中：

export default {
  title: "Icon",
  component: ListIcons,
} as Meta;

export const BaseStory = (args: InterviewEndIconProps) => (
  <>
    <InterviewEndIcon {...args} />
    <RunCodeIcon {...args} />
    <TemplateEditIcon {...args} />
    <VideoOffIcon {...args} />
  </>
);

如果您预见将来添加任意数量的图标，您可以将这些组件名称存储在数组中并迭代它们，这样您就不必一直重复{...args}。不过，此时可能是一个微观优化；）

const iconComponents = [
  'InterviewEndIcon',
  'RunCodeIcon',
  'TemplateEditIcon',
  'VideoOffIcon'
];

export const BaseStory = (args: InterviewEndIconProps) => (
  <>
    {iconComponents.map(IconComponent => {
      return <IconComponent key={IconComponent} {...args} />
    })}
  </>
);