Javascript ReactJs-将带有嵌套React组件的原始HTML转换为JSX

我最近一直在尝试在一个单独的文件中定义呈现的JSX，即使用HAML，然后使用带有Webpack的加载程序将HAML转换为可用的JSX。我首先使用HAML-HAML-loader模块将HAML转换为HTML，然后使用HTML-to-react模块完成这项工作。然而，我发现有很多方法可以做到这一点，而不仅仅是这里概述的方法。 当HAML是纯HAML时，这会很好地工作，例如

.wrapper
    %p Hello World

但是，React JSX的优点在于，您可以在提供给render函数的JSX中嵌套其他React组件的标记。因此，我当然想通过HAML定义该功能：

.wrapper
    %Greeting/

当运行Web包时，返回以下HTML：

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

一串。看起来不错，对吧？但是，当使用危险的LysetinerHTML或html来反应npm包（以及许多其他模块）时，转换后的JSX会变成：

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

这不是预期的JSX。

---

关于如何进行有什么想法吗

要在JSX中呈现HAML，可以使用库。 这是一个网页加载器。 然后你可以吃点像

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

render（）{
返回(~
.包装纸
~);
}

很酷，不是吗

如果不使用Webpack，还有其他库（主要是在JSX中实现Jade）