Складная боковая панель с реакцией и бутстрапом

Question

Я хочу создать сворачиваемую боковую панель с помощью Bootstrap и React, и я следую этому руководству. http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/

Мне удалось создать статический сайт, но я не могу заставить скрипт jquery работать с React. У меня есть несколько файлов Jquery со старого сайта, которые я буду передавать на новый сайт React. Нужно ли мне использовать другой подход?

$("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    $("#menu-toggle-2").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled-2"); 
     $('#menu ul').hide(); 
    }); 

    function initMenu() { 
     $('#menu ul').hide(); 
     $('#menu ul').children('.current').parent().show(); 
     //$('#menu ul:first').show(); 
     $('#menu li a').click(
     function() { 
      var checkElement = $(this).next(); 
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      return false; 
      } 
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#menu ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      return false; 
      } 
      } 
     ); 
     } 
    $(document).ready(function() {initMenu();}); 

Answer 1

В идеале вы не должны использовать JQuery с Реагировать, если у вас есть веские причины (см this thread). Реакция работает, поддерживая реальный DOM синхронизированный со своим собственным виртуальным DOM, поэтому ему не нравится, если jQuery пытается манипулировать DOM, а React пытается сделать что-то.

В вашем случае вам, вероятно, будет лучше использовать компонент React, такой как react-burger-menu, или impromptu-react-sidemenu. Коллекции компонентов, таких как Material UI, также предлагают эту функциональность (material UI's drawer component).

P.S. React Components - хорошее место, чтобы найти другие компоненты для React. Сообщество очень активно и всегда добавляет больше.