javascript - 如何将 jQuery 模板集成到 React App 中
问题描述
我正在开发一个 React 应用程序，并购买了一个使用 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 -->
感谢您的阅读，任何答案将不胜感激。
解决方案
有 2 个主要解决方案，两者都取决于您的脚手架更改的实施方式：
案例 #1 - 嵌入 React 应用程序的静态脚手架 如果您的脚手架是通过包含您的反应应用程序的静态 index.html 提供的，您可以直接在文档上使用 document.ready，作为独立脚本加载。
案例 #2 - 包含 jquery 管理的脚手架的 Rect 应用程序
如果您的 jquery 管理的脚手架加载到反应组件中，您可以在componentDidMount生命周期回调中执行代码，但请记住最终在componentWillUnmount回调中删除侦听器，以避免同时出现多个侦听器添加或事件回调作用于 DOM 中不再可用的元素。
根据您的 React 应用程序的复杂性，情况可能会更复杂或更简单。
推荐阅读
- build - QBS：qbs.buildVariant 和 qbs.configurationName 有什么区别？
- php - codeigniter 保存任何事务
- ruby-on-rails - Rails 5 设计不保存嵌套属性
- python-3.x - 使用 matplotlib 选择网格覆盖的坐标系
- javascript - 如何根据类别对产品进行排序
- sockets - 如何关闭等待服务器套接字侦听的任务？
- bitmap - 如何在文件中存储不同的位长度？
- python - 使用另一个列表中的键聚合一个列表
- uwp - 使用反应式 UI 时通过代码背后的 AutoSuggestBox (UWP) 绑定
- c# - 停止 libusbdotnet 应用程序后，USB 设备不断连接和断开连接