无法将组件导入故事书

Question

我无法使用我的第一本故事书。我正在使用最新的故事书版本和配置，并且运行 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;

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

Found a story file for "Testing" but no exported stories.

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

Answer 1

一个stories文件应该导出故事，命名为export。你的第二个例子没有导出任何故事。

您可以添加：

export MyStory = () => <SampleComponent/>

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

无法将组件导入故事书

Unable to import components into storybook

javascript

typescript

storybook