React组件Storybook文档：如何循环导出数组元素为独立变量？

当然可以实现自动循环导出，不用手动逐个写export语句，以下两种方案都能满足需求：

方案1：通过module.exports动态挂载 #

直接遍历stories数组，将每个元素挂载到module.exports上，Storybook能正常识别这些导出的story：

import type { Story } from '@storybook/react';
import YourComponent from './YourComponent';
// 假设data是你的Props版本数据
import data from './propsVersions';

const stories: Story[] = data.map(
  (item, index) => ({
    name: `Version ${index}`,
    args: { ...item }
  })
);

// 动态生成story0、story1...并导出
stories.forEach((story, index) => {
  module.exports[`story${index}`] = story;
});

// Storybook必需的默认导出
export default {
  title: 'Components/YourComponent',
  component: YourComponent,
};

方案2：用数组转对象再展开导出 #

通过reduce将stories数组转为键为story0、story1的对象，再用ES模块的展开语法导出所有属性：

import type { Story } from '@storybook/react';
import YourComponent from './YourComponent';
import data from './propsVersions';

const stories: Story[] = data.map(
  (item, index) => ({
    name: `Version ${index}`,
    args: { ...item }
  })
);

// 将数组转换为包含命名导出的对象
const storyExports = stories.reduce((exportObj, story, index) => {
  exportObj[`story${index}`] = story;
  return exportObj;
}, {} as Record<string, Story>);

// 导出所有story变量
export { ...storyExports };

// Storybook默认配置
export default {
  title: 'Components/YourComponent',
  component: YourComponent,
};

注意事项 #

• 必须保留Storybook的默认导出，否则无法正确识别组件文档结构
• TypeScript会自动推断导出变量的类型，用Record<string, Story>能确保类型安全
• 两种方案都会根据data的长度自动生成对应数量的story导出，无需手动维护

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