如何隐藏 Material UI 网格项？

Question

我正在尝试隐藏某个产品的网格项并让其他产品滑入。现在我正在使用 display:none 属性，但它会立即隐藏该项目。我已经过滤了产品，我正在检查我想隐藏没有使用某种动画过滤的产品。型号：

import React, { useState, useEffect } from "react";
import { Container, Grid, Card, Skeleton, useMediaQuery, Grow, } from "@mui/material";

import Filter from "./Filter";
import Product from "./Product/Product";
import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { Box } from "@mui/system";
const Products = () => {
   const { category } = useParams();
   const [sortOption, setSortOption] = useState("name");
   const [newProducts, setNewProducts] = useState([]);
   const [menu, setMenu] = useState(false);
   useEffect(() => {
      const selectedSort = sessionStorage.getItem("sortOption") || "name";
      setSortOption(selectedSort);
   }, []);
   const sort = (items, option) => {
      switch (option) {
         case "name":
            return items.sort((a, b) => (a.name > b.name ? 1 : -1));
         case "up":
            return items.sort((a, b) => (a.price.raw > b.price.raw ? 1 : -1));
         case "down":
            return items.sort((a, b) => (a.price.raw < b.price.raw ? 1 : -1));
         default:
            return items.sort((a, b) => (a.name > b.name ? 1 : -1));
      }
   };
   const mobile = useMediaQuery("(max-width:600px)");
   const { products, loading } = useSelector((state) => state.products);
   let items = products.filter((product) => product.categories[0].slug === category);
   let newItems = [];
   newProducts.forEach((product) => {
      items.forEach((item) => {
         if (item.id === product.id) newItems.push(item);
      });
   });

   if (newProducts.length > 0) newItems = sort(newItems, sortOption);
   else newItems = sort(items, sortOption);
   const renderProducts = () => (
      <>

         <Container maxWidth="lg" >
            <Grid
               container
               direction="row"
               spacing={3}
               sx={{
                  pl: !mobile && menu && "300px",
                  transition: ".3s",
               }}>
               {items.map((product) => (
                  newItems.some(newItem => newItem.id === product.id) ? (
                     <Grid item xs={12} sm={6} md={4} lg={3} key={product.id} >
                        <Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
                     </Grid>
                  ) : null
               ))}
            </Grid>
         </Container>
      </>
   );
   const loadingView = () => (
      <Container maxWidth="lg" >
         <Grid
            container
            direction="row"
            spacing={3}
            sx={{
               pl: !mobile && menu && "300px",
               transition: ".3s",
            }}>
            <Grid item xs={12} sm={6} md={4} lg={3}>
               <Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
               <Box sx={{ p: 2 }}>
                  <Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
                  <Card variant="flex" flex="flex">
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
                  </Card>
                  <Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
               </Box>
               <Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
            </Grid>
            <Grid item xs={12} sm={6} md={4} lg={3}>
               <Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
               <Box sx={{ p: 2 }}>
                  <Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
                  <Card variant="flex" flex="flex">
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
                  </Card>
                  <Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
               </Box>
               <Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
            </Grid>
            <Grid item xs={12} sm={6} md={4} lg={3}>
               <Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
               <Box sx={{ p: 2 }}>
                  <Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
                  <Card variant="flex" flex="flex">
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
                     <Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
                  </Card>
                  <Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
               </Box>
               <Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
            </Grid>
         </Grid>
      </Container>
   );
   return <>
      <Filter
         sortOption={sortOption}
         setSortOption={setSortOption}
         menu={menu}
         setMenu={setMenu}
         products={items}
         setNewProducts={setNewProducts}
         category={category}
      />
      {!loading ? renderProducts() : loadingView()}</>;
};
export default Products;

Answer 1

您需要首先按颜色或大小过滤项目。

          ...

          const filteredProducts = newItems.filter(newItem => newItem.id === product.id);

          ...
          <Container maxWidth="lg" >
            <Grid
               container
               // You don't need to use direction="row" since it is default props value
               spacing={3}
              >
               {filteredProducts.map((product) => (
                  <Grid item xs={12} sm={6} md={4} lg={3} key={product.id}>
                     <Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
                  </Grid>

               ))}
            </Grid>
         </Container>
         ...

如果您想更准确地过滤产品，那么您可以构建一个客户过滤功能。请参考this。