在React中集成一个功能齐全的页面（html、css、js）

Question

我有一个独立的 HTML、CSS 和独立运行的 js 页面。 HTML 从 cdns 和文件加载 js 和 CSS。

我希望将其集成到 next/react 应用程序中。我现在拥有的是我的页面的自定义 URL，它只提供静态 HTML 文件，并且按预期工作。

但是问题是登录和用户状态。由于该文件是静态的，因此很难在该文件中保留有关用户登录和其他状态的信息。

我尝试使用 html-loader 将 HTML 加载到 dangerouslySetInnerHTML 中。它确实加载了 HTML。但是，它不会加载任何从 HTML 文件加载的 JS 或 CSS 文件。我认为这是我需要解决的问题。（或者它可能只是一个 XY 问题，因此是之前的整个解释）。

感谢任何帮助或推动正确方法。谢谢

更新：我尝试像这样从 React 应用程序加载我在 HTML 中导入的所有文件：

import "../public/heatmap/scripts/jquery.min.js"
import "../public/heatmap/scripts/heatmap.min.js"
import "../public/heatmap/scripts/bootstrap.bundle.min.js"
import "../public/heatmap/scripts/leaflet"
import "../public/heatmap/scripts/leaflet-heatmap"
import "../public/heatmap/scripts/main"
import "../public/heatmap/scripts/fetch_data"

但这会导致这个错误，我认为在 bootstrap 之前加载 jquery 是没有意义的。

Failed to parse source map: TypeError: Cannot read property 'line' of undefined
    at getNotFoundError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:1:816)
    at getModuleBuildError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2479)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:562
    at Array.map (<anonymous>)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:476
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:8:17)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43260:38
    at eval (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:14:1)
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at fn (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:41174:45)
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43234:34)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43280:10
error - ./public/heatmap/scripts/bootstrap.bundle.min.js:7:76
Module not found: Can't resolve 'jquery'
   5 |   */
   6 | !function(t, e) {
>  7 |     "object" == typeof exports && "undefined" != typeof module ? e(exports, require("jquery")) : "function" == typeof define && define.amd ? define(["exports", "jquery"], e) : e((t = "undefined" != typeof globalThis ? globalThis : t || self).bootstrap = {}, t.jQuery)
     |                                                                            ^
   8 | }(this, (function(t, e) {
   9 |     "use strict";
  10 |     function n(t) {

Answer 1

Next.js 有 Head 个分量：

import Head from "next/head";

这是您为项目设置元数据的地方。此外，您可以在此处加载 cdn。例如：

<Head>

 <link
        href="https://fonts.googleapis.com/css2?family=Alice&family=Great+Vibes&family=Inconsolata&family=Indie+Flower&family=Lobster&family=Press+Start+2P&display=swap"
        rel="stylesheet"
      ></link>

 <script
        src="https://kit.fontawesome.com/fbadad80a0.js"
        crossOrigin="anonymous"
      ></script>

<Head/>

在Header 组件或BaseLayout 组件中使用此组件。始终在您的项目中呈现的组件，因此 cdn 将可用。

或者您可以安装 npm 包并将它们导入 pages/_app.js，这样它们将在您的项目中全局可用。 _app.js 页面负责呈现我们的页面。

请注意，在 React 中使用 jquery 可能会导致一些事件处理错误。

在React中集成一个功能齐全的页面（html、css、js）

Integrate a fully functional page (html, css, js) in React

html

cdn

reactjs

webpack

next.js