首页 > 解决方案 > 是否可以将此 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); // 使用结束严格

标签: reactjs

解决方案


推荐阅读