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

Posted 2023-02-21

【中文标题】ReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX

【英文标题】：ReactJs - Converting raw HTML with nested React Component into 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。 关于如何进行的任何想法？

【参考方案1】：

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

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

很酷，不是吗？

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