将 HTML 站点转换为 React 导入外部 JS

Question

我在 React 中导入外部和内部 JS 文件时遇到问题。我正在尝试将使用 JS 库的现有 HTML 网站转换为 React。

我开始导入 JS。我有一个 Footer.js 组件，我在其中导入我的 JS 文件。 页脚.js

import React from 'react';
import ImportScript from '../utils/ImportScript';

function Footer() {
  ImportScript("https://code.jquery.com/jquery-3.3.1.min.js");
  ImportScript("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js");
  ImportScript("../assets/js/scripts-init/app.js");
  ImportScript("../assets/js/scripts-init/demo.js");

  // I have to return something
  return (
     <div></div>
  );
}

export default Footer;

我的 ImportScript 助手组件：

import { useEffect } from 'react';

const ImportScript = resourceUrl=> {

  useEffect(() => {
    const script = document.createElement('script');
    script.src = resourceUrl;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  }, [resourceUrl]);

};

export default ImportScript;

我称之为 Footer.js 的 App.js。三个点只是不相关的代码，避免这里的代码太多。

...
import Footer from './components/Footer';
...

function App() {
   ... 
   ...
   
   return (
     <div>
       <Footer />
     </div>
   );
}

export default App;

当我运行它时，我在 react 终端中没有收到错误，但在浏览器控制台中，我收到了错误：

The script from “http://localhost:3000/assets/js/scripts-init/app.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Uncaught SyntaxError: expected expression, got '<'  app.js

The script from “http://localhost:3000/assets/js/scripts-init/demo.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Uncaught SyntaxError: expected expression, got '<'  demo.js

这个说来自 'util.js' 我没有 util.js 文件，所以我假设它来自 bootstrap.js

Uncaught TypeError: p is undefined
    <anonymous> util.js:55
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6

我是 React 新手。我试图了解它是如何工作的。顺便说一句，HTML网站中的一些app.js和demo.js文件，在浏览器控制台中没有输出任何错误。

Answer 1

看起来 app.js 和 demo.js 是 react / .jsx 文件，需要编译成 javascript 才能在浏览器上运行。现在您正尝试直接加载这些内容而无需编译。