reactjs - 是否可以将此 jquery 代码与 react 一起使用?
问题描述
我正在尝试使用 react 实现一个免费的 bootstrap 4 主题-是否可以以某种方式将此 jquery 代码与 react 一起使用,我需要重写它吗?
(function ($) { 'use strict'; // 开始使用 strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate(
{
scrollTop: target.offset().top - 70,
},
1000,
'easeInOutExpo'
);
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 100,
});
// Collapse Navbar
var navbarCollapse = function () {
if ($('#mainNav').offset().top > 100) {
$('#mainNav').addClass('navbar-shrink');
} else {
$('#mainNav').removeClass('navbar-shrink');
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
})(jQuery); // 使用结束严格
解决方案
推荐阅读
- hadoop - 使用 sqoop 将数据从 Oracle 导入 HDFS 时如何保留数据类型?
- hadoop - Hadoop HiPi - hibImport NoClassDefFoundError
- azure - 对于 Azure 中的内部服务器到服务器通信,除了自签名证书之外,最好使用哪些证书?
- reactjs - 在 React 中更新呈现形式的函数
- android - 如何从我的 Android 应用程序中打开默认邮件应用程序收件箱?
- spring-boot - 如何从我们的 Spring Boot 微服务向外部服务器请求给定 ID 的数据?
- react-native - 在 react-native 的函数中执行代码后如何导航到另一个页面
- c# - 如何在 sql 存储过程和 c# 之间将 Nvarchar 数据类型转换为 int?
- php - SQL / PHP - 只显示我的数据库的第一个值
- php - 错误“抱歉,找不到您要查找的页面。” 拉拉维尔 5.5