reactjs - 我如何在反应中制作这样的组件？

问题描述

我需要的是如图所示的东西。我需要显示某些名称，如果名称列表超过 2 行，我需要显示 +n others。如果用户单击+n others列表，则需要展开以显示所有其他列表。

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

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

标签： reactjs

您必须存储列表的状态，看看它是否扩展。

这样的事情应该会有所帮助。

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;

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

1：如果您对 box-sizing 和 fonts 等有一个常量值：您可以计算每个元素的 outerWidth（带有 box-sizing 和元素长度）并MAX_COUNT基于此设置一个实数。

2：如果您有响应式设计：您可以使用初始MAX_COUNT但隐藏内容来渲染组件，visibility: hidden然后计算每个元素的outerWidth会更真实，更容易。在这种情况下，您必须修复容器高度以防止它过度延伸，只需为其设置一个恒定高度，您也可以在获得真实的MAX_COUNT. 现在您可以无后顾之忧地显示内容。

reactjs - 我如何在反应中制作这样的组件？

问题描述

解决方案

推荐阅读