Question

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

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

但是当页面第一次加载/渲染时，它的工作正常，但是导航到其他Route / Component 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>Veriipro 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上使用现有的供应商脚本而没有任何问题。

Answer 1

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

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

应该成为

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

作为快速解决方案，您可以将React Router强制设为reload the page on every navigation：

<BrowserRouter forceRefresh/>

但是您可能会在其他反应组件上遇到类似的麻烦。

一些提示可以解决此问题：

尝试用react模块替换jQuery插件
使用React Router提供的history对象侦听导航更改并重新初始化jQuery代码
使用componentDidMount和componentDidUpdate绑定和更新jQuery侦听器

外部供应商脚本（JS，Jquery）在ReactJS中渲染后不起作用

1 个答案: