storybook - 使用 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 组件。您的问题正在发生，因为您正在尝试导入 默认 从你的模块，它实际上只是一个对象:

export default {
  title: 'Components',
};

所有故事都命名为导出，您应该使用解构导入它们:

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

我为您创建了一个示例，其中显示了一个工作场景 here .
附言有趣的是，从 Storybook 6 开始，有一种新机制可以简化故事的创建和重用，敬请期待!它叫 Args .