如何将Jquery插件与React js和react-router-dom一起使用
如何将Jquery插件与React js和react-router-dom一起使用
提问于 2021-03-03 04:46:22
我正在学习react js，并试图从Html template创建一个带有react js的网站。模板使用Jquery Isotope image filter plugin，我的react代码使用react-router-dom来导航页面。启动应用程序时，在home page中，过滤器工作正常，但当使用菜单栏导航到另一个页面时，isotope过滤器不起作用。当我再次硬重新加载页面时，它再次工作。我尝试过一些方法，但没有奏效。那么在react js应用程序中使用Jquery Plugin的方法是什么呢？
我的代码如下：
Index.html页面。在这里，我声明了Scripts
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="root"></div>
<script src="js/app.js"></script>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>Home.js组件。这里我使用的是isotope filter插件：
import React from 'react';'
export default function Home() {
return (
<>
{/* <!-- ======= Portfolio Section ======= --> */}
<section id="portfolio" className="portfolio" style={{ marginTop: "50px" }}>
<div className="container" data-aos="fade-up">
<div className="section-title">
<h2>View Our Image Store</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea.</p>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" className="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div className="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" className="img-fluid" alt="portfolio-1" />
<div className="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div className="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" className="venobox" title="App 1"><i className="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i className="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 portfolio-item filter-web">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" className="img-fluid" alt="portfolio-2" />
<div className="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div className="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" className="venobox" title="Web 3"><i className="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i className="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>isotope plugin在main.js脚本文件中初始化，该脚本文件集成在上面的index.html页面中。因此，当我启动应用程序时，这个页面Home组件工作得很好，但是当我转到另一个菜单并再次回到这个菜单时，filter就不能工作了。正确做到这一点的方法是什么？
我还创建了下面的hooks来加载此Home component中的脚本，但不起作用。Hooks代码：
import React, { useEffect } from 'react'
export default function loadScript(url) {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
}并从Home组件调用它，如下所示：
import loadScript from '../hooks/loadScript'
export default function Home() {
loadScript("assets/vendor/jquery/jquery.min.js");
loadScript("assets/vendor/bootstrap/js/bootstrap.bundle.min.js");
loadScript("assets/vendor/jquery.easing/jquery.easing.min.js");
loadScript("assets/vendor/php-email-form/validate.js");
loadScript("assets/vendor/owl.carousel/owl.carousel.min.js");
loadScript("assets/vendor/waypoints/jquery.waypoints.min.js");
loadScript("assets/vendor/counterup/counterup.min.js");
loadScript("assets/vendor/isotope-layout/isotope.pkgd.min.js");
loadScript("assets/vendor/venobox/venobox.min.js");
loadScript("assets/vendor/aos/aos.js");
loadScript("assets/js/main.js");但这不起作用。这样做的正确方法是什么？
回答 1
Stack Overflow用户
发布于 2021-03-03 04:56:45
您可能在加载jquery时遇到问题。我会将其安装为npm包：
npm i jquery然后将jquery加载到你的应用中，如下所示：
import $ from 'jquery'然而，我不确定它是不是因为其他原因而失败的。您可以将jquery加载为npm包，这可能会减轻一些麻烦，但我怀疑您要使用的jquery插件是否以npm包的形式存在。值得一提的是，在React应用程序中使用jquery有点反模式。并不是说您不能或不应该这样做，而是在尝试构建一个在React的状态管理中被跟踪的数据模型时遇到了挑战。当严重依赖其他库(如jquery )时，将两者结合在一起可能会开始变得非常困难。
也就是说，如果jquery插件完成了一些在React插件中不容易完成的事情，那么有时使用jquery插件仍然是值得的。你必须做出决定，决定哪一个最适合你的情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66446898
复制相关文章
相似问题
腾讯云开发者
