如何创建一个storybook参数，从React元素列表中进行选择

Question

我的一个组件，比如一个卡片组件，将一个图标组件作为子组件。这个图标组件是从一个固定的图标组件列表中选择的。我希望能够在故事书页面中为Card组件创建一个选择控件类型，这样我就可以从列表中选择一个固定的图标，并在Card中显示它们。

部件形状:

<Card>
{icon}
<Styled.Title>{title}</Styled.Title>
<Styled.Description> {description} </Styled.Description>
<Styled.TextLink href="{href}" onClick="{onClick}"> {label} </Styled.TextLink>
</Card>

icon是一个React组件。

<Card />的Storybook文件看起来像这样:

const CardTemplate: Story<CardProps> = (args) => <Card {...args} />
export default {
title: 'Display/Card',
component: Card,
args: {
title: 'fluff',
description:
'some description',
},
argTypes: {
icon: {
defaultValue: null,
options: [] // How do I make this an array of objects: {label: key, value: value},
control: {
type: 'select',
},
},
},
} as Meta

在另一个文件中，我导出一个对象，其中包含每个Icon react组件的名称和值:

export const IconsList = {
Icon1: <Icon1 />,
Icon2: <Icon2 />,
Icon3: <Icon3 />,
}

我如何确保人们可以在<Card />的故事书页面的icon参数中切换这些组件?

Answer 1

你的方法是正确的，但是你错过了几件事。
我认为下面的代码段对你有用。

import { Meta, StoryObj } from "@storybook/react";
import { Icon1, Icon2, Icon3 } from "./IconList";
const ICONS = { Icon1, Icon2, Icon3 }
const meta: Meta<typeof Card> = {
title: 'Display/Card',
component: Card,
args: {
title: 'fluff',
description:
'some description',
},
argTypes: {
icon: {
control: 'select', // or "radio",
options: Object.keys(ICONS),
defaultValue: null
},
},
};
export default meta;
type Story = StoryObj<typeof Card>;
const CardTemplate = (args: CardProps) => {
const icon = ICONS[args.icon as keyof typeof ICONS];
return <Card {...args} icon={icon}>
}
export const CardStory: Story = {
name: "Card",
render: (args) => <CardTemplate {...args} />
}