如何转换脚本.js文档就绪函数包装器和jquery插件方法以在React(16.12.0)中使用

Question

我正在尝试转换一个旧的脚本.js文件，该文件充当包装器，用于选择要在$ jquery中使用的HTML元素以做出反应。希望使用 componentDidMount(( 方法导出/导入到页面组件中，并将其传递给 jquery。不确定如何完成此操作？

我尝试简单地导出函数并导入它，但 npm 抱怨 "期望赋值或函数调用，而是看到表达式">

//script.js
! function($) {
"use strict";
var KerriApp = function() {};
//scroll
KerriApp.prototype.initStickyMenu = function() {
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".sticky").addClass("stickyadd");
} else {
$(".sticky").removeClass("stickyadd");
}
});
},
//Smooth
KerriApp.prototype.initSmoothLink = function() {
$('.navbar-nav a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
},
//Scrollspy
KerriApp.prototype.initScrollspy = function() {
$("#navbarCollapse").scrollspy({
offset:20
});
},
//Typed
KerriApp.prototype.initTextType = function() {
$(".element").each(function() {
var $this = $(this);
$this.typed({
strings: $this.attr('data-elements').split(','),
typeSpeed: 100,
backDelay: 3000
});
});
},
//Work
KerriApp.prototype.initWork = function() {
$(window).on('load', function () {
var $container = $('.work-filter');
var $filter = $('#menu-filter');
$container.isotope({
filter: '*',
layoutMode: 'masonry',
animationOptions: {
duration: 750,
easing: 'linear'
}
});
$filter.find('a').on("click",function() {
var selector = $(this).attr('data-filter');
$filter.find('a').removeClass('active');
$(this).addClass('active');
$container.isotope({
filter: selector,
animationOptions: {
animationDuration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
},
//Magnificpop
KerriApp.prototype.initMagnificPopup = function() {
$('.img-zoom').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
}
});
},
//Client
KerriApp.prototype.initTestimonial = function() {
$("#owl-demo").owlCarousel({
autoPlay: 7000,
stopOnHover: true,
navigation: false,
paginationSpeed: 1000,
goToFirstSpeed: 2000,
singleItem: true,
autoHeight: true,
});
},
//PRELOADER
KerriApp.prototype.initPreloader = function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({
'overflow': 'visible'
});
},
KerriApp.prototype.init = function() {
this.initStickyMenu();
this.initSmoothLink();
this.initScrollspy();
this.initTextType();
this.initWork();
this.initMagnificPopup();
this.initPreloader();
this.initTestimonial();
},
//init
$.KerriApp = new KerriApp, $.KerriApp.Constructor = KerriApp
}(window.jQuery),
//initializing
function($) {
"use strict";
$.KerriApp.init();
}(window.jQuery);

// Page Component
import React, { Component } from 'react';
import $ from 'jquery';
import { scriptjs } from '../assets/js/script';
class Page extends Component {
componentDidMount() {
//what do I do here? 
}
render() {
return (
<div>
{/* Loader */}
{/*<div id="preloader">
<div id="status">
<div className="spinner">Loading...</div>
</div>
</div>*/}
{/* Start Navbar */}
<nav className="navbar navbar-expand-lg fixed-top custom-nav sticky">
<div className="container">
<a className="navbar-brand pt-0 logo" name="top" href="#top">
<img src={require('../assets/images/logo.png')} alt="" className="img-fluid logo-light"/>
<img src={require('../assets/images/logo-dark.png')} alt="" className="img-fluid logo-dark"/>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="mdi mdi-menu"></span>
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="#home">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#about">About</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#services">Services</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#client">Client</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#work">Portfolio</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#blog">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{/* End Navbar */}
{/* START HOME */}
// code continues

Answer 1

利用索引.html 在公用文件夹中加载 jquery 和自定义 js 脚本。相当自信这不是一个理想的解决方案，但可以完成工作。

即 app/public/index.html

索引.html

<!-- JAVASCRIPTS -->
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>