如何从呈现组件获取HTML输出

Question

我是这个世界的新手，并试图进入这个世界。我正在编写一个样式指南，需要显示一些HTML代码作为示例。我使用的是ReactPrism，我无法在PrismCode组件中获得HTML输出，我已经找到了一个解决方法，使用ReactToJSX来显示jsx代码而不是HTML。代码如下：

import React from 'react';
import {PrismCode} from "react-prism";
import reactToJsx from 'react-to-jsx';

class CodePreview extends React.Component {
    render (){
        return (
            <div>
                {this.props.children}
                <h5>Code example</h5>
                <pre>
                    <PrismCode className="language-javascript">
                        {reactToJsx(this.props.children)}
                    </PrismCode>
                </pre>
            </div>
        );
    }
}

export default CodePreview;

因此，基本上我希望将this.props.children（组件）呈现为HTML代码，而不是PrismCode中的内容，我甚至尝试了如下所示https://github.com/tomchentw/react-prism，但它不起作用。不知道我做错了什么！

<PrismCode className="language-javascript">
    {require("raw-loader!./PrismCode")}
</PrismCode>

Answer 1

你有没有考虑过用降价的方式写你的文件？我为react添加了一些特殊标签：

```react:mirror
<Slider
  value={7}
/>
```

这将显示呈现的组件以及突出显示的JSX语法。

```react:demo
<PropsEditor>
  <Slider
    value={7}
  />
</PropsEditor>
```

这将呈现组件以及一个实时编辑器来操作组件上的任何道具。

```react
  <SomeComponent />
```

只会高亮显示语法，但不会渲染组件。

在我的降价文件顶部，我可以导入我在文档中使用的任何组件：

---
imports:
  - import Slider from '../src/slider'
  - import PropsEditor from 'props-editor'
---

这种方式的优点是文档可以像普通的标记一样工作，并且很容易将JSX作为字符串来获取。

为了得到超文本标记语言源，我有一个“查看源代码”

这些步骤是：

• 单击获取react组件的html
• 使用棱镜和美化器格式化html
• 将其插入DOM中

因此，包装react组件并引用节点：

<div ref={(n) => (this.fenceView = n)}>

然后单击在组件下方添加输出，相关位：

import prismjs from 'prismjs';
import beautify from 'xml-beautifier';

const RE_HTML_COMMENTS = /<!--[\s\S]*?-->/g;

removeCodeSource() {
  const existingHtmlCode = this.fenceView.querySelector('.fence-generated-html');
  if (existingHtmlCode) existingHtmlCode.remove();
}

renderCodeSource() {
  const html = this.fenceView.children[0].innerHTML.replace(RE_HTML_COMMENTS, '');
  const fenceCode = beautify(html, '  ');
  const highlightedCode = prismjs.highlight(fenceCode, prismjs.languages.html);
  this.removeCodeSource();
  this.fenceView.insertAdjacentHTML('beforeend',
    `<pre class="fence-generated-html language-html"><code>${highlightedCode}</code></pre>`);
}