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

Question

现在，在我的团队中，我们正在使用 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>

当你想显示展示的代码时，这将导致这种情况：

然而我希望能够看到的是：

<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 代码。

Answer 1

我发现唯一可以在故事书中显示所需的代码，当使用 .mdx 文件时，它是通过使用<Canvas mdxSource={'whatever you want to display'} ></Canvas>