我是 ReactJS 世界的新手并试图进入它。我正在编写一个样式指南,我需要显示一些 HTML 代码作为示例。我为此使用 ReactPrism,但无法在 PrismCode 组件中获取 HTML 输出,我找到了一种解决方法,即使用 react-to-jsx 显示 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>

最佳答案

你有没有考虑过用 Markdown 编写你的文档?我为 react 添加了一些特殊标签:

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

这将显示呈现的组件以及突出显示的 JSX 语法。
```react:demo
<PropsEditor>
  <Slider
    value={7}
  />
</PropsEditor>
```

这将渲染组件以及一个实时编辑器来操作组件上的任何 Prop 。
```react
  <SomeComponent />
```

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

在 Markdown 文件的顶部,我可以导入我在文档中使用的任何组件:
---
imports:
  - import Slider from '../src/slider'
  - import PropsEditor from 'props-editor'
---

这种方式的优点是您的文档可以像普通的 Markdown 一样工作,并且很容易获得 JSX,因为您将其作为字符串。

要获取 HTML 源 我有一个“查看源 </> 按钮,单击时会动态打印格式化的 html:

html - 如何从呈现的组件获取 HTML 输出-LMLPHP

步骤是:
  • 点击获取 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>`);
    }
    

    关于html - 如何从呈现的组件获取 HTML 输出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41056989/

    10-12 01:09
    查看更多