如何通过 <script> 标签将 JSX 导入 HTML 页面？答案

【问题标题】：How do I import JSX to an HTML page via the <script> tag?如何通过 <script> 标签将 JSX 导入 HTML 页面？
【发布时间】：2021-07-12 20:38:57
【问题描述】：

我正在试图弄清楚为什么我的浏览器无法解析 JSX，以及如何配置我的脚本标签以使其能够解析。

上下文：我正在创建一个包含 Swagger-UI 显示的网页，并使用他们的 embedding within html 和 adding custom plugins 文档，我有以下 html，包括 text-babel 类型的渲染器脚本：

<div id="swagger-ui"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/javascript" src="js/swagger-ui-bundle.js" charset="UTF-8"></script>


</script>
<script id="swagger-ui-renderer" type="text/babel">
  window.onload = function() {

    const MyOperationsPlugin = function(system) {
      return {
        wrapComponents: {
          OperationTag: (Original, system) => (props) => {
            props.tag = "MyValue"
            return <Original {...props}/>
          }
        }
      }
    }

  const ui = SwaggerUIBundle({
    url: "www.example-swagger.com",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      MyOperationsPlugin
    ],
  })

  window.ui = ui
}
</script>

这很好用。这就是问题所在：当我添加更多自定义功能时，我希望插件位于它们自己的脚本中。但是，当我将myOperationsPlugin 移动到它自己的文件myOperationsPlugin.js 中，并将其导入到我现有的脚本标签下面...

<script type="text/javascript" src="js/myOperationsPlugin.js" charset="UTF-8"> </script>

...我的浏览器在尝试解析 <Original {...props}/> 时抱怨 Unexpected token '<'。有人可以建议一种构建我的 JS 和 HTML 的方法，以便我可以在外部文件中编写 JSX 并导入它们吗？

很遗憾，使用type="text/babel" 导入脚本并不能解决问题。

【问题讨论】：

标签： javascript html import jsx swagger-ui

【解决方案1】：

您不能在纯 JavaScript 中使用 JSX 标签。

因为你的代码中只有一个 JSX 标签

return <Original {...props}/>

您可以将其替换为non-JSX equivalent:

return system.React.createElement(Original, props)

对于更复杂的代码，有other options，但它们都涉及将 JSX 转换为相应的纯 JS/HTML。你也可以将你的基于 JSX 的插件打包成一个 npm 模块，比如done here，然后通过 npm 加载编译后的版本。

【讨论】：