レンダリングされたコンポーネントからHTML出力を取得する方法

Question

私はReactJSの世界の初心者です。私は、例としていくつかのHTMLコードを表示する必要があるスタイルガイドに取り組んでいます。私はReactPrismを使用していますが、PrismCodeコンポーネント内でHTML出力を取得できないため、HTMLの代わりにJSXコードを表示するreact-to-jsxを使用して回避策を見つけました。だから、基本的に私は、私もhttps://github.com/tomchentw/react-prismに示すように、次の試してみましたHTMLコードとPrismCode におけるそれのないコンテンツとしてthis.props.children（コンポーネント）をレンダリングしたい

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; 

： これはコードですしかし、それは動作しません。私が間違っていることを確認していない！

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

Answer 1

あなたのドキュメントをマークダウンしたことがありますか？反応のための特別なタグを追加しました：

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

これにより、レンダリングされたコンポーネントとJSX構文が強調表示されます。

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

これは、コンポーネント上の任意の小道具を操作するライブエディタと同様に、コンポーネントをレンダリングします。

```react 
    <SomeComponent /> 
``` 

構文だけで強調表示されますが、コンポーネントはレンダリングされません。この方法の利点は、あなたのドキュメントは、通常の値引きとして動作することであり、それはJSXを取得するのは簡単です

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

：私はドキュメントで使用しています任意のコンポーネントをインポートすることができ、私の値下げファイルの先頭に

あなたはそれを文字列として持っているからです。

の手順は次のとおりです：クリックで

• は取得

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