Question

我在制作我的第一本故事书时遇到了麻烦。我正在使用最新的故事书版本和配置，并按照 here 的说明运行 npx sb init。

以下故事文件将运行良好：

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

Answer 1

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

您可以添加：

export MyStory = () => <SampleComponent/>

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

无法将组件导入故事书

1 个答案: