我是 React 新手，目前在我的应用程序中遇到问题。我有一个源自模板的组件，我正在将其转换为 JSX。为了合并现有的 JavaScript 逻辑，我将其放置在 useEffect 中。但是，我遇到了一个问题：映射操作中的特定 div 元素无法正常工作，而映射操作之外的相同 div 却按预期工作。我不确定我的方法是否适用，该方法涉及在 React 中使用 querySelectors 和直接 DOM 操作。我正在寻求帮助来解决此问题。
请告诉我React中是否有类似滤镜效果的库。
import { useEffect, useRef } from "react";
import Isotope from "isotope-layout";
import { initializeAOS } from "../../../utils/initializeAOS";
import { useAppDispatch, useAppSelector } from "../../../store";
import { fetchPortfolio } from "../../../services/portfolioSrevice";
type LayoutModes =
| "masonry"
| "fitRows"
| "vertical"
| "cellsByRow"
| "packery"
| "masonryHorizontal"
| "fitColumns"
| "horiz";
const PortfolioPage = () => {
const portfolioIsotopeRef = useRef<Isotope | null>(null);
const dispatch = useAppDispatch();
const { PortfolioLoading, Portfoliodata } = useAppSelector(
(state) => state.portfolio
);
console.log(Portfoliodata);
useEffect(() => {
const initializeIsotope = () => {
const portfolionIsotope = document.querySelector(".portfolio-isotope");
if (portfolionIsotope) {
const portfolioFilter =
portfolionIsotope.getAttribute("data-portfolio-filter") || "*";
const portfolioLayout =
(portfolionIsotope.getAttribute(
"data-portfolio-layout"
) as LayoutModes) || "masonry";
const portfolioSort =
portfolionIsotope.getAttribute("data-portfolio-sort") ||
"original-order";
const container = document.querySelector(
".portfolio-container"
) as HTMLElement;
if (container) {
portfolioIsotopeRef.current = new Isotope(container, {
itemSelector: ".portfolio-item",
layoutMode: portfolioLayout,
filter: portfolioFilter as
| string
| ((itemElement: HTMLElement) => boolean),
sortBy: portfolioSort,
});
const menuFilters = document.querySelectorAll(
".portfolio-isotope .portfolio-flters li"
);
menuFilters.forEach((el) => {
el.addEventListener("click", handleFilterClick);
});
const allFilterButton = document.querySelector(
'.portfolio-flters li[data-filter="*"]'
) as HTMLButtonElement;
if (allFilterButton) {
allFilterButton.click();
}
}
}
};
const handleFilterClick = (event: Event) => {
const el = event.target as HTMLElement;
const activeFilter = document.querySelector(
".portfolio-isotope .portfolio-flters .filter-active"
);
activeFilter?.classList.remove("filter-active");
el.classList.add("filter-active");
if (portfolioIsotopeRef.current) {
portfolioIsotopeRef.current.arrange({
filter: el.getAttribute("data-filter") || "",
});
}
setTimeout(() => {
initializeAOS();
}, 200);
};
dispatch(fetchPortfolio());
const cleanup = () => {
if (portfolioIsotopeRef.current) {
portfolioIsotopeRef.current.destroy();
}
const menuFilters = document.querySelectorAll(
".portfolio-isotope .portfolio-flters li"
);
menuFilters.forEach((el) => {
el.removeEventListener("click", handleFilterClick);
});
window.removeEventListener("load", initializeIsotope);
window.removeEventListener("load", initializeAOS);
};
// Initialize Isotope and AOS when the component mounts
initializeIsotope();
window.addEventListener("load", initializeAOS);
return cleanup;
}, [dispatch]);
return (
<div className="page-portfolio">
<main id="main">
<div
className="breadcrumbs d-flex align-items-center"
style={{
backgroundImage:
"url('static/template/assets/img/portfolio-header.jpg')",
}}
>
<div className="container position-relative d-flex flex-column align-items-center">
<h2>Portfolio</h2>
<ol>
<li>
<a href="index.html">Home</a>
</li>
<li>Portfolio</li>
</ol>
</div>
</div>
<section id="portfolio" className="portfolio">
<div className="container" data-aos="fade-up">
<div
className="portfolio-isotope"
data-portfolio-filter="*"
data-portfolio-layout="masonry"
data-portfolio-sort="original-order"
>
<ul
className="portfolio-flters"
data-aos="fade-up"
data-aos-delay="100"
>
{/* {Portfoliodata?.map((data) => (
<li
data-filter={
data.category.name === "All"
? "*"
: `.filter-${data.category.name}`
}
>
{data.category.name}
</li>
))} */}
<li data-filter="*">ALL</li>
<li data-filter=".filter-app">Branding</li>
<li data-filter=".filter-Books">Books</li>
</ul>
<div
className="row gy-4 portfolio-container"
data-aos="fade-up"
data-aos-delay="300"
>
{Portfoliodata?.map(() => (
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<img
src="static/template/assets/img/portfolio/app-1.jpg"
className="img-fluid"
alt=""
/>
<div className="portfolio-info">
<h4>App 1</h4>
<p>Lorem ipsum, dolor sit amet consectetur</p>
<a
href="static/template/assets/img/portfolio/app-1.jpg"
title="App 1"
// data-gallery="portfolio-gallery-app"
className="preview-link"
>
<i className="bi bi-zoom-in"></i>
</a>
<a
href="portfolio-details.html"
title="More Details"
className="details-link"
>
<i className="bi bi-link-45deg"></i>
</a>
</div>
</div>
))}
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<img
src="static/template/assets/img/portfolio/app-1.jpg"
className="img-fluid"
alt=""
/>
<div className="portfolio-info">
<h4>App 1</h4>
<p>Lorem ipsum, dolor sit amet consectetur</p>
<a
href="static/template/assets/img/portfolio/app-1.jpg"
title="App 1"
// data-gallery="portfolio-gallery-app"
className="preview-link"
>
<i className="bi bi-zoom-in"></i>
</a>
<a
href="portfolio-details.html"
title="More Details"
className="details-link"
>
<i className="bi bi-link-45deg"></i>
</a>
</div>
</div>
</div>
</div>
</div>
{PortfolioLoading && <div id="preloader"></div>}
</section>
</main>
</div>
);
};
export default PortfolioPage;
检查Portfoliodata属性。 它可以具有保存数组的 data 属性。
const {data,isLoading,isSuccess} = Portfoliodata;
data?.map((portfolio) => (
<li
data-filter={
portfolio.category.name === "All"
? "*"
: `.filter-${portfolio.category.name}`
}
>
{portfolio.category.name}
</li>
)