2

我在 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>

这个生成文档如下： 在此处输入图像描述 有一个显示代码/隐藏代码开关，它显示组件的反应代码，是否也可以显示纯 HTML 标记。

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

谢谢

4

1 回答 1

3

我处于类似的情况，我只想使用 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用来格式化它。

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

于 2020-12-03T09:34:27.657 回答