在 Storybook 中,如何在故事文档的“显示代码”区域中显示组件的完整源代码

现在在我的团队中,我们正在使用 Storybook v6 和 @storybook/addon-docs 包来生成组件文档。

为了保持 .stories.mdx 文件较小,我们分别编写故事“展示”组件,然后将它们导入 .stories.mdx 文件中。

例如

// showcase/HugeComponentShowcase.jsx

import SomeComponent from 'components/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    <p>This is a huge component showcase using SomeComponent</p>
    <SomeComponent propA propB propC/>
    <SomeComponent propB />
  </div>
}
// SomeComponent.stories.mdx

import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
import HugeComponentShowcase from 'showcase/HugeComponentShowcase'; 

<Preview >
  <Story name="Generic component" >
    <HugeComponentShowcase />
  </Story>
</Preview>

当您要显示展示的代码时,这将导致:

enter image description here

但是,我希望能够看到的是:

<div>
  <p>This is a huge component showcase using SomeComponent</p>
  <SomeComponent propA propB propC/>
  <SomeComponent propB />
</div>

或者至少是 HugeComponentShowcase 的整个函数体。

我尝试将其添加到 Story 组件

<Preview >
  <Story name="Generic component" parameters={{ docs: {source: { code: HugeComponentShowcase, } }}}>
    <HugeComponentShowcase />
  </Story>
</Preview>

但这最终会显示组件的编译代码,而不是原始 JSX 代码。

stack overflow In Storybook how can you display the full source of a component in the "Show code" area of a story doc
原文答案