Reactjs 如何在react中制作这样的组件？

我需要的是像图中所示的东西。我需要显示某些名称，如果名称列表超过2行，我需要显示

+n其他

。如果用户单击

+n其他

，则需要展开列表以显示所有其他

react中是否有任何组件可用于获得此结果？我在很多网站上看到过，但不知道它们叫什么

---

我可以自己编写组件，但困难的是在显示+n其他组件之前要显示多少名称。我最初只能显示2行，每个名称的长度可以是可变的。因此，在一种情况下，单个名称可能占据整个第一行，而在其他情况下，我可能可以容纳3个名称。

您必须存储列表的状态，查看列表是否展开

像这样的事情应该会有帮助

import React, { useEffect, useState } from "react";

const myList = ({ list }) => {
  const MAX_COUNT = 5;
  const [isExpended, setIsExpended] = useState(false);
  useEffect(() => {
    if (list.length <= MAX_COUNT) {
      setIsExpended(true);
    }
  }, [list]);
  const expend = () => {
    setIsExpended(true);
  };
  return (
    <>
      <div>
        {list.map((item, i) =>
          (isExpended === false && i < MAX_COUNT) || isExpended === true
            ? item.text
            : null
        )}
      </div>
      {isExpended === false ? (
        <button onClick={expend}>+ {list.length - MAX_COUNT} others</button>
      ) : null}
    </>
  );
};

export default myList;

import React，{useffect，useState}来自“React”；
常量myList=（{list}）=>{
常量最大计数=5；
常量[isExpended，setIsExpended]=useState（false）；
useffect（（）=>{
if（list.length）{
setIsExpended（真）；
};
返回(
{list.map（（项目，i）=>
（IsExpend==false&&i

如果您想在任何条件下保持2行，将有2种方法来设置动态

MAX\u COUNT

：

1：如果框大小和字体等有一个常量值： 您可以计算每个元素的外径（具有框大小和元素长度），并基于此设置实

MAX\u COUNT

2：如果您有响应性设计： 您可以使用初始

MAX_COUNT

渲染组件，但使用

visibility:hidden

隐藏内容，然后计算每个元素的外径将更真实、更容易。

---

在这种情况下，您必须固定容器高度以防止其过度扩展，只需将其设置为一个恒定高度，也可以在获得真正的

MAX\u计数后更改它。

。现在您可以毫无顾虑地显示内容。

您尝试了什么？@sebastienbarbier我完全迷路了，因为我不知道这样的组件是否可用ble。我查看了一些流行的react UI库，但找不到与此相关的任何内容。这是一个非常容易实现的组件，首先构建一个简单的案例，包含一个无分页的可单击标签列表，然后定义一个布尔显示/隐藏，如果显示为真，则显示一个按钮，如果显示为假，则显示列表的其余部分最重要的部分是在我显示

+n其他

之前要显示多少个名称。我最初只能显示2行，每个名称的长度可以是可变的。因此，在一种情况下，单个名称可能占据整个第一行，而在其他情况下，我可能可以容纳3个名称。这对于stackoverflow来说是一个完美的问题，只要您有一个工作的原型wiTH代码显示我不能将5设置为我的代码> Max Survivs/Cult>。我只能在两行中显示名字。让我们考虑一个名称非常长的场景，我可能只能在两行中拟合2个数据条目。在某些情况下，它可能适合5个行。行的数目应该是常数，而不是<代码>r、 a在这种情况下，您必须测量每个显示项目的外径总和（可能前10个就足够了）调整“<代码> Max SuthCuth @ EsFhanhani，因此我需要计算宽度而不将它呈现给DOM。如果我将它添加到DOM和计算中，我需要重新排列页面。如果我预先计算它，我需要考虑填充、字体大小等。使用字体大小和文本长度进行计算，我对该方法不太确定。”a是的，只有当你有一个固定的填充和字体大小的值时，它才起作用。但是我正在做的工作是为了一个响应性强的设计，我认为字体大小是不同的