如何创建一个在 React 元素列表中进行选择的故事书参数

Question

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

组件形状：

<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

在另一个文件中，我导出一个对象，其中包含每个图标反应组件的名称和值：

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

如何确保人们可以在

icon

故事书页面中的

<Card />

arg 中的这些组件之间进行切换？

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} />
}