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

Question

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

上下文：我正在创建一个包含 Swagger-UI 显示的网页，并使用他们的 embedding within html and 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" 导入脚本并不能解决问题。

Answer 1

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

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

return <Original {...props}/>

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

return system.React.createElement(Original, props)

如果代码比较复杂，有other options but all of them involve converting JSX into the corresponding plain JS/HTML. You could also package your JSX-based plugin as an npm module like done here通过npm加载编译好的版本

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

How do I import JSX to an HTML page via the <script> tag?

javascript

html

import

jsx

swagger-ui