Storybook 默认导出（未命名）与模板结合而不是组件

Question

通过故事书，您可以通过以下方式在导出命名故事中使用模板：

export default {
  title: 'My Component',
} as Meta;
export const Default: Story<any> = () => ({
  template: `
    <p>My story</p>
  `
});

这在侧栏中显示为：

• 我的组件
  • 默认（<--- 不想要这个）

但由于它是一页的内容，我不希望“默认”显示在第二级中，而只是在第一级中显示为链接。

现在我在文档中发现您可以使用默认导出来完成这样的事情：

// Button.stories.js

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button, // I don't have a component, just a template
}

但是，该默认导出示例使用“组件”，并且似乎没有“模板”选项。

有什么办法可以做到这一点吗？

Answer 1

这是一个稍微晚了的答案，但是为了使额外的节点从侧边栏中消失，您需要命名导出来匹配故事的标题。像这样：

export default {
  title: 'My Component',
};

export const MyComponent = () => (<p>My story</p>);

您可以在这里阅读更多内容： https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting