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

【问题标题】：External Vendor Scripts( JS, Jquery) Not working after render in ReactJS外部供应商脚本（JS，Jquery）在 ReactJS 中渲染后不起作用
【发布时间】：2025-12-13 20:20:07
【问题描述】：

我正在使用 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 上使用现有的供应商脚本而不会有任何问题。

【问题讨论】：

应用是单页应用吗？
@MikeFeltman 是的

标签： javascript jquery reactjs

【解决方案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 组件时遇到类似的问题。

解决问题的一些提示：

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

【讨论】：