Javascript 无法将组件导入storybook

我很难让我的第一本故事书发挥作用。我正在使用最新的故事书版本和配置，并运行了

npx sb init

，如文档所示

以下故事文件将正常运行：

SampleComponent.stories.tsx:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

从“React”导入React；
//eslint禁用下一行导入/无无关依赖项
从'@storybook/react/types-6-0'导入{Meta}；
//eslint禁用下一行导入/无无关依赖项
从“./SampleComponent”导入SampleComponent；
导出常量Foo:React.FC=（）=>；
导出默认值{
标题:"测试",，
组成部分：富，
}作为元；

但是，下面的故事书不起作用，我得到了一本空的故事书。我还收到了控制台消息：

找到用于“测试”的故事文件，但没有导出的故事

SampleComponent.stories.tsx:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

从“React”导入React；
//eslint禁用下一行导入/无无关依赖项
从'@storybook/react/types-6-0'导入{Meta}；
//eslint禁用下一行导入/无无关依赖项
从“./SampleComponent”导入SampleComponent；
导出默认值{
标题:"测试",，
组件：采样组件，
}作为元；

为什么我不能将

SampleComponent

直接导入默认导出

---

.storybook/main.js:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

module.exports={
“故事”：[
“./src/***故事@（js|jsx|ts|tsx）”
],
“插件”：[
“@storybook/addon链接”，
“@storybook/addon essentials”
]
}

SampleComponent.tsx:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

---

故事

文件应导出故事，命名为导出。您的第二个示例没有导出任何故事

您可以添加：

export MyStory = () => <SampleComponent/>

export MyStory=（）=>

或者导出目录

SampleComponent

，但这可能不是一个好主意：您 可能会使用参数、参数和其他