我正在开发React App，并购买了使用HTML，CSS和jQuery的模板。它仅适用于大多数内容，但是当涉及到某些$(document).ready函数时（如React中），这只是状态更改而不是页面更改，因此ready事件将不会被触发并且无法在尝试时被window.dispatchEvent(new Event('ready'))手动触发。
我应该怎么做才能将其集成到我的应用程序中？将所有这些内容重写为反应生命周期事件将是非常耗时的任务。
仅供参考，我遇到的功能是以下代码，该代码使网站响应并以正确的布局显示菜单，并通过计算窗口的宽度对设备的大小进行分类。对我来说，当前的解决方案是向用户显示警报，以提醒用户在布局不正确时进行刷新，但这太白痴了：
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();
});
已更新
我正在使用create-react-app生成结构，我在public/index.html（layouts.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 -->
感谢您的阅读和任何答复。
答案 0 :(得分：1)
有两种主要解决方案，两者都取决于您如何实施脚手架更改：
案例1-静态脚手架嵌入React应用 如果您的脚手架是通过包含您的应用程序的静态index.html提供的，则可以直接在文档上使用document.ready，并以独立脚本的形式加载。
案例2-Rect应用程序，包括您的jquery托管脚手架
如果将您的jquery托管脚手架加载到react组件中，则可以在componentDidMount生命周期回调中执行代码，但要记住最终要在componentWillUnmount回调中删除该侦听器，以避免同时添加多个侦听器或事件回调对DOM中不再可用的元素起作用。
根据您的React应用的复杂程度，情况可能会更复杂或更简单。