Javascript 外部供应商脚本（JS、Jquery）在ReactJS中渲染后不工作_Javascript_Jquery_Reactjs

Javascript 外部供应商脚本（JS、Jquery）在ReactJS中渲染后不工作

javascript jquery reactjs

Javascript 外部供应商脚本（JS、Jquery）在ReactJS中渲染后不工作,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我正在使用ReactJS创建一个web应用程序前端。我从W3layout下载了一个模板，该模板使用HTML5 CSS3自定义JS文件设计，还包括一些第三方/供应商JS/Jquery插件，如nice select、bootstrap、slik、owl carousel等我不是前端开发人员，我的专长是服务器端脚本和数据库。所以我只想使用相同的下载模板来开发ReactJS应用程序但当页面第一次加载/呈现时，其工作正常，但导航到其他路径/组件Jquery/其他供应商脚本时停止工作甚至我也想触发插

我正在使用ReactJS创建一个web应用程序前端。我从W3layout下载了一个模板，该模板使用HTML5 CSS3自定义JS文件设计，还包括一些第三方/供应商JS/Jquery插件，如nice select、bootstrap、slik、owl carousel等

我不是前端开发人员，我的专长是服务器端脚本和数据库。所以我只想使用相同的下载模板来开发ReactJS应用程序

但当页面第一次加载/呈现时，其工作正常，但导航到其他路径/组件Jquery/其他供应商脚本时停止工作

甚至我也想触发插件的更新/更改，比如

componentDidUpdate(){
//  $('select').niceSelect('update');
}

所有这些都不起作用

这是我的Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="/img/fav.png">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="UTF-8">
        <!-- Site Title -->
        <title>Training</title>

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
  <!--  CSS
  ============================================= -->
        <link rel="stylesheet" href="/css/linearicons.css">
        <link rel="stylesheet" href="/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/magnific-popup.css">
        <link rel="stylesheet" href="/css/nice-select.css">                         
        <link rel="stylesheet" href="/css/animate.min.css">
        <link rel="stylesheet" href="/css/owl.carousel.css">            
        <link rel="stylesheet" href="/css/jquery-ui.css">           
  <link rel="stylesheet" href="/css/main.css">
  
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  </head>
<body>     <div id="root"></div>

<script src="/js/vendor/jquery-2.2.4.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="/js/vendor/bootstrap.min.js"></script>         
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
        <script src="/js/easing.min.js"></script>           
        <script src="/js/hoverIntent.js"></script>
        <script src="/js/superfish.min.js"></script>    
        <script src="/js/jquery.ajaxchimp.min.js"></script>
        <script src="/js/jquery.magnific-popup.min.js"></script>    
        <script src="/js/jquery.tabs.min.js"></script>                      
        <script src="/js/jquery.nice-select.min.js"></script>   
        <script src="/js/owl.carousel.min.js"></script>                                 
        <script src="/js/mail-script.js"></script>  
        <script src="/js/main.js"></script>


训练

如何在react js上使用现有的供应商脚本而不产生任何问题。

jQuery将其侦听器绑定到现有的dom元素。当dom更改时，新节点不会自动获取这些侦听器。您需要在导航（以及任何其他重要的dom更改）之后调用每个jQuery脚本的初始化阶段。或者，您可以让这些侦听器收听

文档

：

$('button').click(function(){})

应该成为

$(document).on('click', 'button', function(){})

作为快速修复，您可以强制路由器：

但是，您可能会在使用其他组件时遇到类似的问题

解决此问题的一些提示：

尝试用react模块替换jQuery插件

使用React Router提供的对象侦听导航更改并重新生成jQuery代码

使用

componentDidMount

和

componentdiddupdate

绑定和更新jQuery侦听器

该应用程序是单页应用程序吗？@MikeFeltman是

<BrowserRouter forceRefresh/>