javascript - element.current.scrollHeight 不返回实际高度(React,CSS)

我有一个 <div> 容器,当用户在下拉列表中选择选项时,该容器将填充一些标签。如果标签填满了我为容器指定的空间,我想显示一个带有剩余选定选项数量的“+N”标签。

预期输出:isOverflowing 条件设置为 true

实际输出:isOverflowing 永远不会设置为 true

代码

const [selectedOptions, setSelectedOptions] = useState<number[]>([]);
const [overflowing, setOverflowing] = useState(false);

const tagsRef = useRef<HTMLDivElement>(null);

const isOverflowing = (element: any) => {
  return element.current?.scrollHeight > element.current?.clientHeight; // NEVER RETURNS TRUE
};

useLayoutEffect(() => {
  if (isOverflowing(tagsRef)) {
    setOverflowing(true);
  } else {
    setOverflowing(false);
  }
}, [tagsRef, selectedOptions]);

...

return (
  <TagsWrapper ref={tagsRef} className="tagsWrapper">
    {selectedOptions.map((option, index) => (
      ...
    ))}
  </TagsWrapper>
)

CSS

.tagsWrapper {
  display: flex;
  flex-flow: row wrap;
  max-height: 32px;
  max-width: calc(100% - 50px - 16px - 4px);
  overflow: hidden;
}

控制台记录 tagsRef 总是显示 scrollHeightclientHeight 是相同的,而实际上它们不是(当我在浏览器上检查时,我可以看到 div 更高)。

我尝试了许多 max-heightheight... 的组合,但均无济于事。如果 overflow 属性设置为 visible 它显然可以工作,但我不想显示剩余的标签......有没有我没有看到的解决方案?

谢谢!

回答1

我设法看到了自己的问题。 max-heightoverflow 属性应该在溢出容器的父元素上:

<TagsContainer>
  <TagsWrapper ref={tagsRef} className="tagsWrapper">
    {selectedOptions.map((option, index) => (
      ...
    ))}
  </TagsWrapper>
</TagsContainer>
.tagsContainer {
  max-height: 32px;
  overflow: hidden;
}
.tagsWrapper {
  display: flex;
  flex-flow: row wrap;
  ...
}

相似文章

jquery - 分页编号序列不起作用(jquery)

如果我单击任何数字,分页顺序将不起作用。如果我单击数字3,它会跳到数字4,每次我单击该数字时,它都会跳到另一个数字。但是,如果我单击下一个和上一个按钮,它就可以正常工作。它的发生是因为省略号li。任何...