如何使用 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

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

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

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

如果您预见到将来会添加任意数量的图标，您可以将这些组件名称存储在一个数组中并循环访问它们，这样您就不必一直重复 {...args}。不过此时可能是 micro-optimisation ;)

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

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

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

How to add multiple components into one story using Storybook?

typescript

reactjs

storybook