解构赋值能否返回任意数量对象？如何批量生成Storybook故事？

1. 解构赋值是否可以返回任意数量的对象？ #

可以。数组解构赋值支持从数组中提取任意数量的对象，只要右侧的可迭代对象（比如数组）包含对应数量的元素。如果解构的变量数量超过右侧数组的元素数，多余的变量会被赋值为undefined。

示例：

// 从数组中解构3个对象
const [obj1, obj2, obj3] = [{a:1}, {b:2}, {c:3}];

// 变量数多于数组元素数，obj4为undefined
const [obj1, obj2, obj3, obj4] = [{a:1}, {b:2}];

2. 实现批量生成Storybook Stories的bindStories函数 #

要实现满足需求的bindStories函数，让它返回足够数量的ComponentStory实例，同时支持后续单独设置.args，可以参考以下两种方案：

方案1：按指定数量批量克隆 #

如果只需要固定数量的故事克隆，函数接收模板和数量参数，生成对应数量的ComponentStory实例：

import type { ComponentStory, ComponentTemplate } from '@storybook/react';

function bindStories<T>(template: ComponentTemplate<T>, count: number): ComponentStory<T>[] {
  return Array.from({ length: count }, () => bindStory(template));
}

// 使用示例
export const [Default, WithError, AnotherOne, ExtraStory1, ExtraStory2] = bindStories(Template, 5);
// 后续单独配置每个故事的args
WithError.args = { hasError: true };
AnotherOne.args = { variant: 'primary' };

方案2：按配置项生成带初始设置的故事 #

如果需要给每个故事预设名称或初始args，可以让函数接收配置数组，批量生成带初始配置的故事：

import type { ComponentStory, ComponentTemplate } from '@storybook/react';

interface StoryConfig<T> {
  name?: string;
  args?: Partial<T>;
}

function bindStories<T>(template: ComponentTemplate<T>, configs: StoryConfig<T>[]): ComponentStory<T>[] {
  return configs.map(config => {
    const story = bindStory(template);
    // 合并初始args
    if (config.args) {
      story.args = { ...story.args, ...config.args };
    }
    // 自定义故事名称（可选，Storybook默认使用变量名）
    if (config.name) {
      story.storyName = config.name;
    }
    return story;
  });
}

// 使用示例
export const [Default, WithError, AnotherOne] = bindStories(Template, [
  {}, // 默认故事，无额外配置
  { args: { hasError: true } },
  { name: 'Primary Variant', args: { variant: 'primary' } }
]);

关键注意点 #

• 确保bindStory返回的ComponentStory是可修改的对象，这样后续才能正常赋值.args。
• 使用TypeScript时，通过泛型约束保证类型安全，避免类型错误。
• 解构变量数量要和bindStories返回的数组长度匹配，否则多余变量会是undefined。

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