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

Question

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

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

这在边栏中显示为：

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

但是因为它是一页的东西，我不希望“默认”出现在第二层，而只是第一层 link。

现在我发现in the docs您可以使用默认导出来做这样的事情：

// 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

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

Storybook default export (non-named) in combination with template as opposed to component

angular

storybook