将 mui 芯片夹成 2 排

Question

在我的react.js项目中，我在div中有一些mui芯片。如果筹码溢出到超过 2 行并显示“显示全部”按钮，我想将行限制为 2。仅当筹码重新溢出到两行以上时，此按钮才应可见。

PS：芯片可能具有不同的宽度，但具有相同的高度和相同的间隙。

有什么建议吗？

Answer 1

这就是您所需要的，您可以创建两个引用，一个用于outerContainer，另一个用于容纳芯片的innerContainer。

outerContainer 应根据切换状态切换高度，最初它将有足够的高度来显示 2 行芯片。它应该启用

overflow: hidden;

以隐藏其余芯片。

然后在 useEffect() 挂钩内，您可以使用 refs 检查两个容器的高度。在那里，您可以有自己的逻辑，知道如果出现溢出该怎么办。

import React, { useEffect, useRef, useState } from "react";
import { Chip } from "@mui/material";

const App = () => {
  const innerDiv = useRef(null);
  const outerDiv = useRef(null);
  const [isOverFlowing, setIsOverFlowing] = useState(false);
  const [toggle, setToggle] = useState(false)

  const chips = [
    { name: "Potato Chip", value: "potato_chip" },
    { name: "Tortilla Chip", value: "tortilla_chip" },
    { name: "Pita Chip", value: "pita_chip" },
    { name: "Kale Chip", value: "kale_chip" },
    { name: "BBQ Chip", value: "bbq_chip" },
    { name: "Corn Chip", value: "corn_chip" },
    { name: "Sweet Potato Chip", value: "sweet_potato_chip" },
    { name: "Sour Cream Chip", value: "sour_cream_chip" },
    { name: "Spicy Chip", value: "spicy_chip" },
    { name: "Cheese Chip", value: "cheese_chip" },
    { name: "Ranch Chip", value: "ranch_chip" },
    { name: "Multigrain Chip", value: "multigrain_chip" },
    { name: "Salt & Vinegar Chip", value: "salt_vinegar_chip" },
    { name: "Garlic Parmesan Chip", value: "garlic_parmesan_chip" },
    { name: "Jalapeño Chip", value: "jalapeno_chip" },
    { name: "Chili Lime Chip", value: "chili_lime_chip" },
    { name: "Onion Dip Chip", value: "onion_dip_chip" },
    { name: "Sea Salt Chip", value: "sea_salt_chip" },
    { name: "Buffalo Wing Chip", value: "buffalo_wing_chip" },
    { name: "Salsa Verde Chip", value: "salsa_verde_chip" },
    { name: "Rosemary Olive Oil Chip", value: "rosemary_olive_oil_chip" },
  ];

  useEffect(() => {
    if (
      innerDiv.current.getBoundingClientRect().height >
      outerDiv.current.getBoundingClientRect().height
    ) {
      setIsOverFlowing(true);
    } else {
      setIsOverFlowing(false);
    }
  }, [isOverFlowing]);

  return (
    <div>
      <div ref={outerDiv} className={`w-[50%] leading-[2rem] ${toggle === true ? "h-auto" : "h-[85px]"} bg-black bg-opacity-5 overflow-hidden`}>
        <div ref={innerDiv} id="container" className="flex p-2 flex-wrap justify-start items-center">
          {chips.map((chip) => (
            <div className="">
              <Chip label={chip.name} />
            </div>
          ))}
        </div>
      </div>
      {isOverFlowing && (
        <div onClick={() => setToggle(p => !p)}>overflow</div>
      )}
    </div>
  );
};

export default App;

我希望它有帮助。干杯🤜🏻🤛🏻