javascript 无法使用函数提取CSF默认导出

sxissh06  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(102)

我想抽象Storybook的CSF默认导出对象,如下所示:

MetaFunction。js

export const getMeta = (title, component) => ({
  title: `Example/${title}`,
  component: component,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
});

Button.stories.js:

import { Button } from './Button';
import { getMeta } from './metaFunction';

// This works 👇
// const meta = {
//   title: 'Example/Button',
//   component: Button,
//   tags: ['autodocs'],
//   argTypes: {
//     backgroundColor: { control: 'color' },
//   },
// };

// This doesn't 👇
const meta = getMeta('Button', Button);

export default meta;

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary = {
  args: {
    label: 'Button',
  },
};

export const Large = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

问题是,当我使用getMeta函数时,Storybook崩溃并显示错误“CSF:缺少默认导出”。看起来我必须声明一个对象,根本不能抽象它,甚至不能在初始 meta对象中使用扩展对象。
有没有办法用函数抽象CSF默认导出对象?

复制

转到this repo and the function_debug branch,运行npm install,然后运行npm run storybook

gojuced7

gojuced71#

你能做到的

export default { ...getMeta('Button', Button), title: 'Button' }

相关问题