使用 Storybook 将 .stories 文件导入另一个 .stories 文件？

Question

你能用 Storybook 将一个 .stories 文件导入另一个 .stories 文件吗？

例如我有

/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx

我还想为我的所有组件编写一个故事：

在/all-components/all-components.stories.tsx

import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';

export const Test = () => {
  return (
    <div>
      <Component1Story />
      <Component2Story />
    </div>
  );
};

export default {
  title: 'Components',
};

我收到这个错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of storyFn.

Answer 1

这应该是可行的，因为您的故事只是 React 组件。出现问题是因为您试图从模块中导入 default，它实际上只是一个对象：

export default {
  title: 'Components',
};

所有的故事都是命名导出，你应该用解构导入它们：

import { Component1Story } from '../component1/component1.stories';
import { Component2Story } from '../component2/component2.stories';

我为您创建了一个显示工作场景的示例 here。

p.s。有趣的是，从 Storybook 6 开始，有一种新机制可以简化故事的创建和重用，敬请期待！它被称为 Args。

使用 Storybook 将 .stories 文件导入另一个 .stories 文件？

Import .stories file into another .stories file with Storybook?

storybook