如何隱藏 Material UI 網格項？

Question

我正在嘗試隱藏某個產品的網格項目並讓其他產品滑入。現在我正在使用 display:none 屬性，但它會立即隱藏該項目。 我已經過濾了產品，我正在檢查我想隱藏沒有使用某種 animation 過濾的產品。 model：

 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>
         ...

如果您想更准確地過濾產品，那么您可以構建一個客戶過濾器 function。 請參考這個。