Question

我最近一直试图在一个单独的文件中定义我渲染的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/

，当通过Webpack运行时返回以下HTML：

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

作为一个字符串。看起来不错吧？但是，当使用dangerouslySetInnerHtml或html-to-react 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，还有其他库（主要是在JSX中实现Jade）。

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

1 个答案: