Javascript 如何将jQuery模板集成到React应用程序中

我正在开发一个React应用程序，并购买了一个使用HTML、CSS和jQuery的模板。它只适用于大多数内容，但当涉及到一些

$（document.ready

功能时，就像在React中一样，它只是一个状态更改而不是页面更改，

ready

事件不会被触发，也不能由

窗口手动触发。dispatchEvent（新事件（'ready'））

，正如我尝试的那样

我应该如何将其集成到我的应用程序中？将所有这些内容重写为react生命周期事件将是一项非常耗时的任务

仅供参考，我遇到麻烦的功能是以下代码，它使网站响应并以正确的布局显示菜单，通过计算窗口宽度对设备大小进行分类。我目前的解决方案是向用户显示一个警报，提醒用户在没有获得正确布局时刷新，但这太愚蠢了：

jQuery(document).ready(function($) {
    'use strict';

    var totalWidth = $(window).width(),
        layout = $('.layout').css("font-family"),
        secondary_sidebar_width = 200;


    // ---------------------------------
    // 1. Handheld devices menu toggle
    // ---------------------------------
    $(".left-toggle-switch").hammer().on("click touchstart", function(e) {
        e.preventDefault();
        if ($("body").hasClass("left-aside-toggle")) {
            $("body").removeClass("left-aside-toggle");
        } else {
            $("body").addClass("left-aside-toggle");
        }
    });

    function AsideHeight() {
        var TopBarHeight = $('.main-nav').height(),
            calc_wh = wh - TopBarHeight,
            menuMargin = $('header').outerHeight(),
            containerMargin = $('.main-nav').outerHeight(),
            menuHeight = wh - menuMargin;

        $(window).resize(function() {
            if($(window).width() < 801) {
                $(".menu").css({
                    "height": wh + "px"
                });
                $(".main-container").css('margin-top', containerMargin);
                $(".user-profile").load("menus/sidebar-user-profile.html");
                $(".menu-container").load("menus/material-sidebar.html");
                $('.left-aside-container').slimscroll({
                    height: calc_wh + 50,
                    width: "250px"
                    }).mouseover(function() {
                    $(this).next('.slimScrollBar');
                });

                if($(window).width() == 800) {
                    $(".container-sidebar").css({
                        "height": "100%",
                        "width": "200px",
                        "position": "fixed",
                        "float": "left"
                    });

                    $('.secondary-sidebar').slimscroll({
                        height: calc_wh,
                        width: "200px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });

                    $(".container-aside").css({
                        "width": totalWidth - secondary_sidebar_width,
                        "margin-left": secondary_sidebar_width,
                        "float": "left"
                    });
                }
            }

            else if(($(window).width() >= 1024)){

                // ---------------------------------
                // 2. Material menu
                // ---------------------------------
                if(layout == "material"){
                    $(".menu").addClass(" sidebar");
                    $(".user-profile").load("menus/sidebar-user-profile.html");
                    $(".menu-container").load("menus/material-sidebar.html");
                    $(".sidebar").css({
                        "height": menuHeight ,
                        "top": menuMargin
                    });
                    $(".main-container").css('margin-top', containerMargin);
                    $('.sidebar .left-aside-container').slimscroll({
                        height: menuHeight + 12,
                        width: "220px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 220;
                }


                // ---------------------------------
                // 3. Dropdown menu
                // ---------------------------------
                else if(layout == 'dropdown'){
                    $(".menu").addClass(" dd");
                    $(".menu").css('top', menuMargin);
                    $(".main-container").css('margin-top', containerMargin);
                    $(".menu-container").load("menus/dropdown.html");
                    var sidebar_width = 0;
                }


                // ---------------------------------
                // 4. Dropdown label menu
                // ---------------------------------
                else if(layout == 'dropdown_label'){
                    $(".menu").addClass(" dd");
                    $(".menu").css('top', menuMargin);
                    $(".main-container").css('margin-top', containerMargin);
                    $(".menu-container").load("menus/dropdown.html");
                    var sidebar_width = 0;
                }


                // ---------------------------------
                // 5. Megamenu
                // ---------------------------------
                else if(layout == 'megamenu'){
                    $(".menu").addClass(" megamenu");
                    $(".menu").css('top', menuMargin);
                    $("ul.main-menu").css('top', menuMargin);
                    $(".main-container").css('margin-top', containerMargin);
                    $(".menu-container").load("menus/megamenu.html");
                    var sidebar_width = 0;

                    $(function () {
                        menuOpen();
                    });
                    function menuOpen() {
                        $('.dropdown').on('show.bs.dropdown', function (e) {
                            if ($(window).width() > 750) {
                                $(this).find('.dropdown-menu').first().stop(true, true).fadeIn('slow');
                            }
                            else {
                                $(this).find('.dropdown-menu').first().stop(true, true).show('slow');
                            }
                        });
                        $('.dropdown').on('hide.bs.dropdown', function (e) {
                            if ($(window).width() > 750) {
                                $(this).find('.dropdown-menu').first().stop(true, true).fadeOut('slow');
                            }
                            else {
                                $(this).find('.dropdown-menu').first().stop(true, true).hide('slow');
                            }
                        });
                    }
                }


                // ---------------------------------
                // 6. Iconic menu
                // ---------------------------------
                else if(layout == 'iconic'){
                    $("body").addClass(" iconic-view");
                    $(".menu").addClass(" iconic-leftbar");
                    $(".main-container").css('margin-top', containerMargin);
                    $(".iconic-leftbar").css('margin-top', containerMargin);
                    $(".user-profile").load("menus/sidebar-user-profile.html");
                    $(".menu-container").load("menus/iconic.html");
                    $('ul.sidemenu-sub').slimscroll({
                        height: menuHeight + 10,
                        width: "200px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 60;
                }


                // ---------------------------------
                // 7. Sidebar menu
                // ---------------------------------
                else if(layout == 'sidebar'){
                    $(".menu").addClass(" leftmenu");
                    $(".menu-container").load("menus/material-sidebar.html");
                    $(".main-container").css('margin-top', containerMargin);
                    $(".leftmenu").css({
                        "height": menuHeight +1,
                        "top": menuMargin
                    });
                    $('.leftmenu .left-aside-container').slimscroll({
                        height: menuHeight + 11,
                        width: "220px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 220;
                }


                // ---------------------------------
                // 8. Boxed menu
                // ---------------------------------
                else if(layout == 'boxed'){
                    $(".menu").addClass(" leftmenu");
                    $(".menu-container").load("menus/material-sidebar.html");
                    $(".main-container").css('margin-top', containerMargin);
                    $(".leftmenu").css({
                        "height": menuHeight +1,
                        "top": menuMargin
                    });
                    $('.leftmenu .left-aside-container').slimscroll({
                        height: menuHeight + 11,
                        width: "200px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 200;
                }


                // ---------------------------------
                // 9. Iconbar menu
                // ---------------------------------
                else if(layout == 'iconbar'){
                    $(".menu").addClass(" leftmenu");
                    $(".menu-container").load("menus/material-sidebar.html");
                    $(".main-container").css('margin-top', containerMargin);
                    $(".leftmenu").css({
                        "height": menuHeight +1,
                        "top": menuMargin
                    });
                    $('.leftmenu .left-aside-container').slimscroll({
                        height: menuHeight + 11,
                        width: "160px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 200;
                }


                // ---------------------------------
                // 10. Default menu (material)
                // ---------------------------------
                else if(layout == ''){
                    $(".menu").addClass(" leftmenu");
                    $(".menu-container").load("menus/material-sidebar.html");
                    $(".main-container").css('margin-top', containerMargin);
                    $(".leftmenu").css({
                        "height": menuHeight +1,
                        "top": menuMargin
                    });
                    $('.leftmenu .left-aside-container').slimscroll({
                        height: menuHeight + 11,
                        width: "200px"
                        }).mouseover(function() {
                        $(this).next('.slimScrollBar');
                    });
                    var sidebar_width = 200;
                }

                $(".container-sidebar").css({
                    "height": "100%",
                    "width": "200px",
                    "position": "fixed",
                    "float": "left"
                });

                $('.secondary-sidebar').slimscroll({
                    height: calc_wh,
                    width: "200px"
                    }).mouseover(function() {
                    $(this).next('.slimScrollBar');
                });

                $(".container-aside").css({
                    "width": totalWidth - secondary_sidebar_width - sidebar_width,
                    "margin-left": secondary_sidebar_width,
                    "float": "left"
                });
            }
        }).resize();
    }
    AsideHeight();
});

---

感谢阅读，如有任何答案，我们将不胜感激。

主要有两种解决方案，这两种解决方案都取决于脚手架变更的实施方式：

案例#1-静态脚手架嵌入反应应用程序 如果脚手架是通过包含react应用程序的static index.html提供的，您可以直接在文档上使用document.ready，作为独立脚本加载

Case#2-Rect应用程序，包括您的jquery托管脚手架 如果jquery托管支架加载到react组件中，您可以在

componentDidMount

lifecycle回调中执行代码，但请记住最终在

componentWillUnmount

回调中删除侦听器，以避免添加多个侦听器或对不再可用的元素执行事件回调在DOM中

---

根据React应用程序的复杂性，情况可能更复杂或更简单。

我不确定我是否正确，但我想我的情况是case#1，我在index.html中添加了脚本。我已经更新了编码参考。我可以有更多关于解决方案的细节吗？我已经尝试了几种方法来触发改变，但运气不佳，你的解决方案可能会救我一命！应用的解决方案在很大程度上取决于您的应用程序结构/支架，您应该在小型应用程序中重现该问题，以便提供进一步的详细信息。尝试在componentDidMount中添加2个主侦听器（$（“.left toggle switch”）.hammer（）.on（）和$（window）.resize（）），并删除componentWillUnmount中的侦听器（$（window）.off（“resize”）和$（.left toggle switch”）.hammer（）.off（“单击touchstart”）卸载您的app.js主条目生命周期

<!-- Global scripts -->
<script src="%PUBLIC_URL%/lib/js/core/jquery/jquery.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/jquery/jquery.ui.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/bootstrap/bootstrap.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/hammer/hammerjs.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/hammer/jquery.hammer.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/slimscroll/jquery.slimscroll.js"></script>
<script src="%PUBLIC_URL%/lib/js/forms/uniform.min.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/app/layouts.js"></script>
<script src="%PUBLIC_URL%/lib/js/core/app/core.js"></script>
<!-- /Global scripts -->