ReactJs - 生のHTMLをネストしたReactコンポーネントでJSXに変換

Question

私は最近、レンダリングされたJSXを別のファイル、つまりHAMLで定義し、Webpackでローダーを使用してHAMLを使用可能なJSXに変換しようとしています。私は最初にhaml-haml-loaderモジュールを使ってHAMLをHTMLに変換し、html-to-reactモジュールを使用してジョブを終了します。しかし、私は、ここで概説された方法だけでなく、これを行うための多くの方法があることを発見しました。 HAMLは純粋HAMLの場合、このような

.wrapper 
    %p Hello World 

として、よく働くしかし、リアクトJSXの美しさは、あなたが他の巣タグはレンダリング機能を提供JSX内のコンポーネントを反応させることができるということです。だから、もちろん私はHAMLを通じてその機能を定義したいと思います：文字列として

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

：WebPACKを介して実行、

.wrapper 
    %Greeting/ 

は、次のHTMLを返します。良いよね？ dangerouslySetInnerHtml又はHTMLから反応NPMパッケージ（ならびに多くの他のモジュール）のいずれかを使用する場合しかし、変換されたJSXは次のようになる。

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

意図JSXされていません。 進める方法についてのアイデアはありますか？

Answer 1

JSXの中でHAMLをレンダリングするには、https://github.com/dingbat/haml-jsx-loaderライブラリを使用できます。 Webpackローダーです。 は、その後、あなたが

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

クールのようなものを持つことができ、そうではありませんか？

Webpackを使用していない場合は、他のライブラリがあります（主にJadeをJSX内で実装しています）。