如何为Storybook创建可选React组件列表的Arg参数

要在Card组件的Storybook页面中添加可切换的图标选择控件，按以下步骤操作：

1. 导入图标列表 #

在Card的Storybook文件中，先导入你定义的IconsList对象：

import { IconsList } from './path-to-icons-list'; // 替换为实际文件路径

2. 配置Icon参数的选择控件 #

修改argTypes中的icon配置，通过options定义下拉选项，mapping将选项映射到对应图标组件：

argTypes: {
  icon: {
    defaultValue: null,
    // 定义下拉选项：包含"无图标"和所有图标名称
    options: ['None', ...Object.keys(IconsList)],
    control: {
      type: 'select',
      // 可选：自定义下拉菜单显示的标签，让选项更直观
      labels: {
        None: '无图标',
        Icon1: '图标1',
        Icon2: '图标2',
        Icon3: '图标3'
      }
    },
    // 将选项键映射到对应的图标组件实例或null
    mapping: {
      None: null,
      ...IconsList
    }
  }
}

3. 完整的Storybook代码示例 #

import { Meta, Story } from '@storybook/react';
import Card from './Card';
import { IconsList } from './path-to-icons-list'; // 替换为实际路径

const CardTemplate: Story<CardProps> = (args) => <Card {...args} />;

export default {
  title: 'Display/Card',
  component: Card,
  args: {
    title: 'fluff',
    description: 'some description',
    icon: null
  },
  argTypes: {
    icon: {
      defaultValue: null,
      options: ['None', ...Object.keys(IconsList)],
      control: {
        type: 'select',
        labels: {
          None: '无图标',
          Icon1: '图标1',
          Icon2: '图标2',
          Icon3: '图标3'
        }
      },
      mapping: {
        None: null,
        ...IconsList
      }
    }
  }
} as Meta;

export const Default = CardTemplate.bind({});

原理说明 #

Storybook的select控件使用字符串类型的选项键更稳定，直接传入React组件实例可能存在序列化问题。通过mapping配置，我们将下拉选项的字符串键映射到对应的图标组件实例，这样既能在控制面板中展示友好的选择项，又能正确将图标组件传入Card中。

启动Storybook后，Card组件的控制面板会出现一个下拉选择框，切换选项即可实时更新Card中的图标。

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