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

Question

我正在使用create-react-app创建一个反应应用程序。我在主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进行路由。

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

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

但即使这个解决方案也无效。请帮忙解决这个问题。

谢谢

Answer 1

您正在使用componentWillMount()而不是componentDidMount()。

我认为这是问题所在。

Answer 2

你可以在window对象上设置js文件，然后你可以通过window.your_name来访问它。

您必须在索引文件中设置它

Answer 3

尝试在import()中使用componentDidMount()

import（）是自我解释的。它只是导入JavaScript文件。

import('your_URL')

Answer 4

尝试使用window对象调用事件。参考<a href="https://github.com/facebook/create-react-app/issues/3007#issuecomment-357863643">Link</a>

Answer 5

这就是我如何将Jquery导入我的创建反应应用程序

jQuery的：

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

import * as $ from '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