如何通过以下方式将 JSX 导入 HTML 页面<script> tag?

Question

我想弄清楚为什么我的浏览器不能解析 JSX，以及如何配置我的脚本标签以便它可以。

上下文：我正在创建一个包含 Swagger-UI 显示的网页，并使用他们的文档嵌入 html并添加自定义插件，我有以下 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"导入脚本并不能解决问题。

Answer 1

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

由于您的代码中只有一个 JSX 标签

return <Original {...props}/>

你可以用非 JSX 等价物替换它：

return system.React.createElement(Original, props)

对于更复杂的代码，还有其他选项，但所有这些都涉及将 JSX 转换为相应的纯 JS/HTML。 您还可以将基于 JSX 的插件打包为一个 npm 模块，就像这里完成的那样，并通过 npm 加载编译后的版本。