如何在Storybook中修改buttons时同步更新value的options选项？

针对你使用的Storybook 6.0.1-beta.9版本，可以通过以下两种方式实现buttons数组修改时自动同步value的下拉选项：

方式一：动态计算options（推荐） #

直接在argTypes中把value的options设为动态函数，从当前args的buttons数组里提取value值：

export default {
  title: 'Foo',
  component: Foo,
  args: {
    buttons: [
      { label: 'Lorem', value: 'Lorem' },
      { label: 'Ipsum', value: 'Ipsum' },
    ],
    value: 'Lorem',
  },
  argTypes: {
    value: {
      // 动态从buttons中提取value作为选项
      options: ({ args }) => args.buttons.map(btn => btn.value),
      control: { type: 'select' },
      // 映射确保选项值正确关联
      mapping: ({ args }) => args.buttons.reduce((acc, btn) => {
        acc[btn.value] = btn.value;
        return acc;
      }, {})
    },
  },
} as ComponentMeta<typeof Foo>;

这种方式不需要额外钩子，直接利用Storybook的options函数特性，当args.buttons修改时，下拉选项会自动更新。如果修改后的buttons导致当前value不在选项列表中，Storybook会自动将其重置为第一个有效选项。

方式二：使用Decorator结合useArgs钩子 #

如果需要更精细的控制（比如自定义value的重置逻辑），可以用decorators配合useArgs监听args变化：

import { useArgs } from '@storybook/client-api';

export default {
  title: 'Foo',
  component: Foo,
  args: {
    buttons: [
      { label: 'Lorem', value: 'Lorem' },
      { label: 'Ipsum', value: 'Ipsum' },
    ],
    value: 'Lorem',
  },
  argTypes: {
    value: {
      control: { type: 'select' },
    },
  },
  decorators: [
    (Story) => {
      const [args, updateArgs] = useArgs();
      const valueOptions = args.buttons.map(btn => btn.value);

      // 若当前value不在选项中，自动重置为第一个选项
      if (!valueOptions.includes(args.value) && valueOptions.length > 0) {
        updateArgs({ value: valueOptions[0] });
      }

      // 更新value的下拉选项
      return <Story argTypes={{
        ...args.argTypes,
        value: {
          ...args.argTypes?.value,
          options: valueOptions,
        }
      }} />;
    }
  ],
} as ComponentMeta<typeof Foo>;

注意：6.0.1-beta.9版本已支持useArgs钩子，可直接使用。

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