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与React一起使用（请参阅this thread）。 React通过使真正的DOM与其自己的虚拟DOM保持同步来工作，所以如果jQuery在React试图做它的事情时试图操纵DOM，它就不喜欢它。

在您的情况下，您可能最好使用React组件，例如react-burger-menu或impromptu-react-sidemenu。像Material UI这样的组件集合也提供此功能（material UI's drawer component）。

编辑 - 删除了React Components链接，因为它是一个死链接＆amp;垃圾邮件已经填满。

带有React和Bootstrap的可折叠边栏

1 个答案: