접을 수있는 사이드 바 (React 및 부트 스트랩 포함)

Question

부트 스트랩 및 리 액트를 사용하여 접을 수있는 사이드 바를 만들고 싶습니다.이 자습서를 따르고 있습니다. http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/

정적 사이트를 생성 할 수 있었지만 jquery 스크립트를 React와 함께 사용할 수 없습니다. 이전 사이트에서 새로운 React 사이트로 전송할 몇 개의 Jquery 파일이 있습니다. 다른 접근 방법을 취해야합니까? 당신이 좋은 이유 (this thread 참조)하지 않는 한

$("#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를 사용하면 안됩니다. React는 실제 DOM을 자체 가상 DOM과 동기화하여 작동하므로 React가 해당 작업을 수행하려고 시도하는 동안 jQuery가 DOM을 조작하려고 시도하면 좋지 않습니다.

귀하의 경우에는 react-burger-menu 또는 impromptu-react-sidemenu과 같은 React 구성 요소를 사용하는 것이 더 나을 것입니다. Material UI와 같은 구성 요소 모음에는이 기능 (material UI's drawer component)도 있습니다.

P. React Components은 React의 다른 구성 요소를 찾을 수있는 좋은 장소입니다. 커뮤니티는 매우 적극적이며 항상 더 많은 것을 추가합니다.