javascript - 无法将组件导入故事书

Question

我在使用我的第一本故事书时遇到了问题。我正在使用最新的故事书版本和配置，并运行 npx sb init 来执行此操作，如记录 here .

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

示例组件.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.

示例组件.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"
  ]
}

示例组件.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、参数和其他。