如何解决如何在 React js 和 react-router-dom
我正在学习 React js 并尝试使用 react js 中的 Html template 创建一个网站。该模板使用 Jquery Isotope image filter plugin 和我的反应代码使用 react-router-dom 导航页面。启动应用程序时，home page 中的过滤器工作正常，但使用菜单栏导航到另一个页面时，isotope 过滤器不起作用。当我再次硬重新加载页面时，它再次起作用。我尝试了一些方法，但没有奏效。那么在 Jquery Plugin 应用中使用 react js 的方式是什么？？
我的代码如下：
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,500,500i,700i|Poppins:300,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");
但是是行不通的。这样做的正确方法是什么？
解决方法
您可能在加载 jquery 时遇到问题。我会将其安装为 npm 包：
npm i jquery
然后像这样将 jquery 加载到您的应用中：
import $ from 'jquery'
但是，我不确定它是否因其他原因而失败。您可以将 jquery 作为 npm 包加载，这可能会带来一些麻烦，但我怀疑您要使用的 jquery 插件是否作为 npm 包存在。我应该提到在 React 应用程序中使用 jquery 有点反模式。并不是说你不能或不应该，但挑战在于尝试构建一个在 React 状态管理中跟踪的数据模型。当严重依赖其他库（如 jquery）时，将两者拼接在一起可能需要大量工作。
也就是说，有时使用 jquery 插件仍然是值得的，如果它完成了在 React 插件中无法轻松完成的事情。您必须决定哪种方式最适合您的情况。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
