如何从呈现的组件

时间:2016-12-09 09:23:03

标签: html reactjs react-jsx prism.js

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

1 个答案:

答案 0 :(得分:1)

您是否考虑过在降价时撰写文档?我添加了一些反应的特殊标签:

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

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

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

这将渲染组件以及实时编辑器来操作组件上的任何道具。

```react
  <SomeComponent />
```

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

在我的降价文件的顶部,我可以导入我在doc中使用的任何组件:

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

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

要获取HTML源,我有一个&#34;查看来源</>按钮,可在点击时动态打印格式化的html:

enter image description here

步骤如下:

    点击
  • 获取反应组件的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>`);
}