无法将组件导入故事书

Posted 2023-02-19

【中文标题】无法将组件导入故事书

【英文标题】：Unable to import components into storybook

【发布时间】：2021-05-12 08:16:14

【问题描述】：

我无法让我的第一本故事书工作。我正在使用最新的故事书版本和配置，并运行 npx sb init 来执行此操作，如 here 所记录的那样。

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

SampleComponent.stories.tsx：

import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import  Meta  from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';

export const Foo: React.FC = () => <SampleComponent />;

export default 
  title: 'Testing',
  component: Foo,
 as Meta;

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

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

SampleComponent.stories.tsx：

import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import  Meta  from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';

export default 
  title: 'Testing',
  component: SampleComponent,
 as Meta;

为什么我无法将SampleComponent 直接导入我的默认导出？

---

.storybook/main.js：

module.exports = 
  "stories": [
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@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

【参考方案1】：

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

您可以添加：

export MyStory = () => <SampleComponent/>

或导出目录SampleComponent，但这可能不是一个好主意：你 可能会使用 args、参数等。