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

Question

I am using an HTML template, which I converted to React by placing the assets folder into public (in React).我正在使用 HTML 模板，我通过将资产文件夹置于公共（在 React 中）将其转换为 React。 I put the both the css files link and js scripts to public index.html (see code below).我将 css 文件链接和 js 脚本都放到了公共 index.html 中（参见下面的代码）。 The css is displayed properly, however, the javascript functions aren't working. css 显示正常，但是 javascript 功能不起作用。 I tried installing jquery, but it still doesn't work.我试过安装jquery，但还是不行。

I tried to put the js files into the src files and import it in the App.js file as: import './js/main.js' .我尝试将 js 文件放入 src 文件中，并将其导入 App.js 文件中： import './js/main.js' 。 This also doesn't work and logs errors such as: Expected an assignment or function call and instead saw an expression and 'jquery' is not defined .这也不起作用并记录错误，例如： Expected an assignment or function call and instead saw an expression and 'jquery' is not defined 。

Index.html:索引.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>

Does anyone know why the js files aren't working?有谁知道为什么js文件不起作用？ Any help would be highly appreciated.任何帮助将不胜感激。

Thanks in advance!提前致谢！

Answer 1

Try to put your scripts inside index.html 's head tag, or just use npm i jquery --save and then import $ from 'jquery' .尝试将您的脚本放在index.html的头标签中，或者只使用npm i jquery --save然后import $ from 'jquery' 。

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

问题描述

1 个解决方案

解决方案1
1 2021-02-21 17:03:35

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

问题描述

1 个解决方案

解决方案1 1 2021-02-21 17:03:35

解决方案1
1 2021-02-21 17:03:35