如何將JSX作爲字符串獲取？

我想寫一個更高階的組件，比如AddMarkup，它有一個孩子。它應該讓孩子和產生它的代碼一起呈現。例如：如何將JSX作爲字符串獲取？

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

應該導致這樣的事情：

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

我與<pre>位掙扎。有沒有辦法將原始JSX作爲字符串抓取（這樣我可以將它放入<pre>標籤中）？有什麼可以應用的Babel或Webpack魔法嗎？

來源

2016-04-26 Misha Moroshko

這是一個棘手的！我不確定是否有一個簡單的解決方案可以將React元素的結果「逆向」轉換爲其JSX字符串表示形式。也許你可以從React開發工具回購中找到一些啓發，看看他們如何在控制檯顯示jsx，也許在[Node.js]（https://github.com/facebook/react-devtools/blob/master/frontend/） Node.js）文件？ – Pcriulan

也許[jsx-to-string]（https://www.npmjs.com/package/jsx-to-string）可能通過Babel插件以某種奇怪的方式掛鉤。您需要定義一些約定（'props.childrenAsString'？），並在通過** jsx-to-string **處理它時生成與Babel匹配的代碼。在此之後，您的代碼將與一個不是特別酷的自定義Babel插件結婚。 –

@bebraw是的，'jsx-to-string'可能是一個好的開始。隨意發佈它作爲答案;） –

可能解決此問題的最佳方法是編寫一個自定義Babel插件，依靠jsx-to-string來處理轉換。你需要編寫代碼，通過一些預定義的prop（插件設置）將代碼注入爲字符串，如childrenAsString。

雖然這會起作用，但它也會將您的代碼綁定到Babel。儘管如此，如果你需要它，並且對這個問題感到滿意，這可能值得一試。

來源

2016-04-27 16:58:31

如何將JSX作爲字符串獲取？

回答

相關問題