javascript - 外部 Javascript 在 react.js 中不起作用

Question

我正在使用 create-react-app 创建一个 React 应用程序。我在主 index.html

中有一些用于模板设计的外部 javascript 库

 <script src="%PUBLIC_URL%/js/jquery-2.2.4.min.js"></script>
 <script src="%PUBLIC_URL%/js/common_scripts.js"></script>
 <script src="%PUBLIC_URL%/js/main.js"></script>
 <script src="%PUBLIC_URL%/js/owl.carousel.js"></script>

当应用程序启动时，这些 JS 文件在第一页上工作。但是当从第一页重定向到其他页面时，这些库不起作用。据我了解，这些文件正在呈现，但它们的 functions, variables, and methods 在路由更改时不可访问。我正在使用 react-router-dom v4 进行路由。

我用谷歌搜索并找到了解决方案-通过 ComponentDidMount() 方法渲染 JS 库

ComponentDidMount(){
    loadjs('./js/main.js', function(){
    loadjs('./js/common_scripts.js)
    });
  }

但即使是这个解决方案也行不通。请帮助解决这个问题。

谢谢

Answer 1

这就是我将 Jquery 导入到我创建的 React 应用程序中的方式

Jquery:

1. 首先运行npm install jquery
2. index.js

从“jquery”导入 * 作为 $

window.jQuery = window.$ = $

参见:http://blog.oddicles.org/create-react-app-importing-bootstrap-jquery-cleanly-node-js/

或者，您可以将脚本附加到窗口对象，然后根据需要调用它们:

尝试以下步骤:

在/public/index.html 中包含外部 js 文件链接使用带有前缀窗口的外部库。例如，JQuery。

在你的/public/index.html 中加入以下行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>`

在你的项目中使用它:

window.$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

`

详情请看:

https://github.com/facebook/create-react-app/issues/3007