如何在 index.html React 中使用外部 js 文件答案

【问题标题】：How to use external js files in index.html React如何在 index.html React 中使用外部 js 文件
【发布时间】：2021-05-24 01:09:21
【问题描述】：

我正在使用一个 HTML 模板，我通过将资产文件夹置于公共（在 React 中）将其转换为 React。我将 css 文件链接和 js 脚本都放到了公共 index.html 中（参见下面的代码）。 css 显示正确，但是 javascript 函数不起作用。我试过安装jquery，但还是不行。

我尝试将 js 文件放入 src 文件中，并在 App.js 文件中导入为：import './js/main.js'。这也不起作用并记录错误，例如： 期待一个赋值或函数调用，但看到一个表达式并且'jquery'没有定义。

索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="%PUBLIC_URL%/assets/css/main.css" rel="stylesheet">  
  <link href="%PUBLIC_URL%/assets/css/fontawesome-all.min.css" rel="stylesheet">  
  <link href="%PUBLIC_URL%/assets/css/noscript.css" rel="stylesheet"> 

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="%PUBLIC_URL%/assets/js/jquery.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/jquery.scrollex.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/browser.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/breakpoints.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/util.js"></script>
    <script src="%PUBLIC_URL%/assets/js/main.js"></script>
  </body>
</html>

有谁知道为什么 js 文件不起作用？任何帮助将不胜感激。

提前致谢！

【问题讨论】：

标签： javascript html jquery css reactjs

【解决方案1】：

尝试将脚本放在index.html 的头部标签中，或者只使用npm i jquery --save，然后使用import $ from 'jquery'。

【讨论】：

感谢您的回答！我尝试了你建议的所有事情。它解决了 jquery is not defined 错误并解决了我使用 /* eslint-disable */ 的预期分配或函数调用错误，所以现在我不再收到任何错误，但网站的 javascript 动画仍然没有工作。你知道将 javascript 文件包含到 React 中的任何其他方式吗？
对我来说，总是将脚本放在头部工作......所以它一定是一个 React 问题。这些动画——也许它们与 React 的工作方式相冲突？如果我的回答有帮助，我会很感激 +1 :)