React 的 Storybook 显示纯 HTML 源代码和 <Preview> 插件

Question

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

<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),
  },
}

这已记录在案 here。

我的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 对其进行格式化。

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

React 的 Storybook 显示纯 HTML 源代码和 <Preview> 插件

Storybook for React to show plain HTML source code with <Preview> Addon

reactjs

storybook

storybook-addon-specifications