Блог

Главная - Вопросы по программированию - Скрипты внешнего поставщика (JS, Jquery) Не работает после рендеринга в ReactJS

Скрипты внешнего поставщика (JS, Jquery) Не работает после рендеринга в ReactJS

#javascript #jquery #reactjs

#javascript #jquery #reactjs

Вопрос:

Я создаю интерфейс веб-приложения с помощью ReactJS. Я загрузил шаблон из W3layout, который разработан с использованием пользовательского JS-файла HTML5 CSS3, а также включает некоторые плагины JS / Jquery сторонних производителей, такие как nice-select, bootstrap, slik, owl-carousel и т. Д

Я не являюсь Front-End разработчиком, мой опыт связан с серверными сценариями и базой данных. Итак, я просто хотел использовать тот же загруженный шаблон для разработки приложения 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 без каких-либо проблем.

Комментарии:

1. Является ли приложение одностраничным приложением?

2. @MikeFeltman Да

Ответ №1:

jQuery привязывает своих слушателей к существующим элементам dom. При изменении dom новые узлы не получают эти прослушиватели автоматически. Вам необходимо вызвать фазу инициализации каждого скрипта jQuery после навигации (и любого другого существенного изменения dom). В качестве альтернативы вы можете заставить этих слушателей слушать document вместо этого:

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

должно стать

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

В качестве быстрого исправления вы можете заставить React Router перезагружать страницу при каждой навигации:

 <BrowserRouter forceRefresh/>

Но вы, вероятно, столкнетесь с аналогичными проблемами с другими компонентами react.

Несколько советов по устранению проблемы:

  1. попробуйте заменить плагины jQuery модулями react

  2. используйте объект history, предоставляемый маршрутизатором React, для прослушивания изменений навигации и повторного запуска кода jQuery

  3. используйте componentDidMount и componentDidUpdate для привязки и обновления прослушивателей jQuery