ReactJs - 將原始HTML與嵌套React組件轉換爲JSX

我最近一直試圖在一個單獨的文件中定義我的渲染JSX，即使用HAML，然後使用帶有Webpack的加載器將HAML轉換爲可用的JSX。我首先通過haml-haml-loader模塊將HAML轉換爲HTML，然後使用html-to-react模塊來完成這項工作。但是，我發現有很多方法可以做到這一點，而不僅僅是這裏概述的方法。這種運作良好，當HAML是純HAML，如ReactJs - 將原始HTML與嵌套React組件轉換爲JSX

.wrapper 
    %p Hello World

然而，JSX發生反應的妙處在於，你可以在其它嵌套的標籤作出反應JSX內的組件提供給渲染功能。所以，當然我想通過HAML定義功能：

.wrapper 
    %Greeting/

，當通過的WebPack運行返回以下HTML：

<div class="wrapper"> 
    <Greeting> 
</div>

爲字符串。看起來不錯，對吧？然而，即使用dangerouslySetInnerHtml或HTML到反應NPM封裝（以及許多其他模塊）時，轉換後的JSX變爲：

<div class="wrapper"> 
    <greeting></greeting> 
</div>

這是不期望的JSX。關於如何進行的任何想法？

來源

2016-06-12 elonybear

要在JSX內部渲染HAML，您可以使用https://github.com/dingbat/haml-jsx-loader庫。這是一個Webpack加載器。然後你可以有類似的東西

render() { 
    return (~ 
    .wrapper 
     <Greetings /> 
    ~); 
}

很酷，不是嗎？

如果您不使用Webpack，還有其他庫（主要是在JSX內部實現Jade）。

來源

2017-02-25 05:36:27

ReactJs - 將原始HTML與嵌套React組件轉換爲JSX

回答

相關問題