JSXを文字列として取得するにはどうすればよいですか？

Question

上位コンポーネントを記述したいと思います。たとえば、AddMarkupという子要素が1つあります。子をそれを生成するコードとともにレンダリングする必要があります。たとえば：

<AddMarkup> 
    <MyButton color="red"> 
    Red Button 
    </MyButton> 
</AddMarkup> 

はこのようなものになるはずである：私は<pre>ビットに苦しんだ

<div> 
    <button style={{ color: 'red' }}> /* Assume that MyButton is implemented this way */ 
    Red Button 
    </button> 
    <pre> 
    <MyButton color="red"> 
     Red Button 
    </MyButton> 
    </pre> 
</div> 

。元のJSXを文字列として取得する方法はありますか（つまり、<pre>タグに入れることができます）。私が適用できるバベルやウェブパックの魔法はありますか？

Answer 1

これを解決する最良の方法は、変換を処理するためにjsx-to-stringに依存するカスタムのBabelプラグインを作成することです。あなたはchildrenAsStringのようなあらかじめ定義されたprop（プラグイン設定）を通してコードを文字列として注入するコードを書く必要があります。

これはうまくいくが、あなたのコードをBabelに結びつけるだろう。それでも、あなたがそれを必要としていて、あなたが落ち着きに満足しているなら、それは価値があるかもしれません。