如何通過以下方式將 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 加載編譯后的版本。