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

【问题标题】：Import .stories file into another .stories file with Storybook?使用 Storybook 将 .stories 文件导入另一个 .stories 文件？
【发布时间】：2020-10-24 00:02:30
【问题描述】：

您可以使用 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',
};

我收到此错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

检查storyFn的渲染方法。

【问题讨论】：

标签： storybook

【解决方案1】：

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

export default {
  title: 'Components',
};

所有故事都被命名为导出，您应该通过解构导入它们：

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

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

附言有趣的是，从 Storybook 6 开始，有一种新机制可以简化故事的创建和重用，敬请期待！它叫Args。

【讨论】：