React 的 Storybook 使用 <Preview> Addon 显示纯 HTML 源代码

Question

我在 Storybook for React 中使用Preview插件来显示文档中的组件用法。

<Preview withToolbar>
  <Story name="primary">
  <PrimaryButton  disabled={boolean("Disabled",false)} modifiers={["small"]} onClick={action('button-click')} > {text("Label", "Hello Storybook")}</PrimaryButton>
  </Story>
</Preview>

这会生成如下文档： 有一个显示代码/隐藏代码开关，它显示组件的 React 代码，是否也可以显示纯 HTML 标记。

我需要为 React 和非 React 项目使用单个故事书组件资源管理器，因此想检查是否也生成纯标记源代码。

谢谢

Answer 1

我处于类似的情况，我只想使用 React 来开发故事，并且只在文档中显示 HTML，以便它可以与其他框架一起使用。

这是我到目前为止想到的。

我.storybook/preview.js使用自定义函数来呈现源代码，因此文件看起来像这样：

import renderToHTML from './renderToHTML'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  docs: {
    transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
  },
}

这在此处记录。

我的renderToHTML函数定义如下：

import { renderToStaticMarkup } from 'react-dom/server'
import { AllHtmlEntities } from 'html-entities'
import prettier from 'prettier'
import HTMLParser from 'prettier/parser-html'
const entities = new AllHtmlEntities()

export default (story) =>
  prettier.format(entities.decode(renderToStaticMarkup(story())), {
    parser: 'html',
    plugins: [HTMLParser],
  })

我用来renderToStaticMarkup编译这个故事，然后html-entities取消转义它，然后使用prettier它来格式化它。

我仍在尝试这个，所以如果我发现问题或更好的方法，我可能会更新答案