リアクタとブートストラップ付きの折りたたみ可能なサイドバー

Question

ブートストラップとリアクトを使用して折りたたみ可能なサイドバーを作成したいと思います。 http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/

私は静的なサイトを生成することができましたが、jqueryスクリプトをReactで動作させることができません。古いサイトからJqueryファイルをいくつか入手して、新しいReactサイトに転送します。私は別のアプローチをとる必要がありますか？あなたが良い理由を（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などのリアクションコンポーネントを使用する方がよいでしょう。マテリアルUIのようなコンポーネントのコレクションもこの機能を提供します（material UI's drawer component）。

P.S. React Componentsは、Reactの他のコンポーネントを見つけるのに適しています。コミュニティは非常に積極的で、いつもより多くを追加しています。