如何從渲染組件獲取HTML輸出

我是ReactJS世界的新手，並試圖進入它。我正在製作一個樣式指南，爲此我需要顯示一些HTML代碼作爲示例。我使用的是ReactPrism，我無法在PrismCode組件中獲得HTML輸出，我找到了一個解決方法，使用react-to-jsx來顯示JSX代碼而不是HTML。這是代碼：如何從渲染組件獲取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>

來源

2016-12-09 Edrees

< - 如果你想粘貼RAW Html到一些組件 –

謝謝你的迴應，我已經嘗試過，但它沒有工作，因爲this.props.children傳遞一個對象從其中我需要HTML輸出 – Edrees

您是否考慮在降價中編寫文檔？我添加了一些反應的特殊標記：

```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就像你把它作爲一個字符串一樣。

要獲取HTML源我有一個「查看源代碼</>按鈕，動態打印格式的HTML點擊時：

的步驟是：

上點擊獲取反應組件的html
格式化使用棱鏡和美化器的html
將其插入到DOM

因此包裝你的反應組件，併爲節點的引用：

<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>`); 
}

來源

2016-12-09 10:45:58

我試圖做的是以下幾點：我有一些反應組件，如按鈕，輸入元素，表單等，我想顯示該組件，它也是頁面上的HTML代碼。所以this.props。兒童渲染組件，但不知道如何從渲染對象獲取HTML，例如this.props.children。 – Edrees

這是很容易做一個ref的組件，然後使用香草javascript來獲得html和格式與棱鏡，我會張貼一個例子，我做同樣的事情 –

非常感謝多米尼克這真的幫助我修復問題：） – Edrees

如何從渲染組件獲取HTML輸出

回答

相關問題