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

【问题标题】：ReactJs - Converting raw HTML with nested React Component into JSXReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX
【发布时间】：2016-10-12 18:36:35
【问题描述】：

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

.wrapper
    %p Hello World

然而，React JSX 的美妙之处在于，您可以在提供给渲染函数的 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。关于如何进行的任何想法？

【问题讨论】：

标签： javascript html reactjs haml jsx

【解决方案1】：

要在 JSX 中渲染 HAML，您可以使用 https://github.com/dingbat/haml-jsx-loader 库。这是一个 Webpack 加载器。然后你可以有类似的东西

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

很酷，不是吗？

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

【讨论】：