Reactjs 故事书，用于使用<；显示纯HTML源代码；预览>；插件

我正在使用故事书中的插件React来显示文档中的组件使用情况

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

{文本（“标签”，“你好故事书”）}

本次生成单据如下： 有一个show code/hide code开关，显示组件的React代码，也可以显示普通HTML标记

我需要为React和non-React项目使用一个storybook组件资源管理器，以便检查是否也生成了纯标记源代码

---

谢谢

我也遇到了类似的情况，我只想使用react来开发故事，只在文档中显示HTML，这样就可以与其他框架一起使用

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

在

.storybook/preview.js

中，我使用一个自定义函数来呈现源代码，使文件看起来像这样：

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

从“./renderothtml”导入renderothtml
导出常量参数={
操作：{argTypesRegex:'^on[A-Z].*}，
文件：{
transformSource：（src，storyContext）=>renderToHTML（storyContext.storyFn），
},
}

这是有案可查的

My

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实体

来 取消对其进行缩放，然后使用

prettier

对其进行格式化

---

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

寻找类似的方法，您在这方面取得了任何进展吗？这也是。对代码的一点改进可能是在更漂亮的配置中添加

htmlWhitespaceSensitivity:“ignore”

。它将使HTML呈现得更好。