如何为自定义 Storybook 插件渲染 MD 文件？

Question

我正在尝试渲染通过参数传递的 MD 文件。我可以成功让文本显示出来，但我真的想把它格式化成MD文件。

我试图使用 @storybook/addon-docs，但看起来这些需要在 MDX 文件中使用，而不是直接在 React 中使用，因为我收到此错误：Uncaught TypeError: storyById is not a function.

import React from 'react';
import { useParameter } from '@storybook/api';
import { Title, Description } from '@storybook/addon-docs';
import { PARAM_KEY } from '../constants';

const WhatsNewPanel = (props: any) => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value : 'No Markdown Defined';
  return (
    <>
      <Title>What&apos;s New?</Title>
      <Description>{item}</Description>
    </>
  );
};

export default WhatsNewPanel;

如果我删除 Title 和 Description 组件，我可以成功看到未格式化的 MD 文本。

有谁知道 API 或渲染格式化 MD 文件的方法？

我的PR code.

Answer 1

react-markdown 是我的第一次尝试，效果很好，但后来我发现如果我拉 import { Description } from "@storybook/components"; 而不是 @storybook/addon-docs，一切都会按预期进行。

代码可以在我的Pull Request.

中看到

如何为自定义 Storybook 插件渲染 MD 文件？

How do I render an MD file for a custom Storybook addon?

javascript

reactjs

storybook

storybook-addon-specifications