求助：构建固定行数可展开动态选择组件的实现难题

要解决这个问题，核心是通过DOM测量判断子组件是否超出3行空间，而非依赖固定的子项数量（毕竟每行子项数不固定）。下面是具体实现思路和代码示例：

核心逻辑 #

1. 用隐藏容器渲染所有子组件，获取它们的总高度
2. 计算3行布局的最大允许高度（单行高度×3 + 行间距×2）
3. 对比总高度和最大允许高度，判断是否需要显示More按钮
4. 截断显示前N个能放进3行的子组件，最后一行替换为More按钮（点击后展开全部）

React代码示例 #

import { useState, useRef, useEffect } from 'react';

const ExpandableSelect = ({ items, rowLimit = 3 }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const containerRef = useRef(null);
  const hiddenContainerRef = useRef(null);

  useEffect(() => {
    if (!hiddenContainerRef.current || !containerRef.current || items.length === 0) return;

    // 获取单行高度和行间距
    const firstItem = hiddenContainerRef.current.querySelector('.select-item');
    const singleRowHeight = firstItem.getBoundingClientRect().height;
    const rowGap = parseInt(getComputedStyle(hiddenContainerRef.current).rowGap) || 0;
    // 计算3行的最大允许高度
    const maxAllowedHeight = singleRowHeight * rowLimit + rowGap * (rowLimit - 1);
    // 获取所有子项的总高度
    const totalHeight = hiddenContainerRef.current.getBoundingClientRect().height;

    setShowMore(totalHeight > maxAllowedHeight);
  }, [items, rowLimit]);

  // 计算要显示的子项（截断到3行内，留位置放More按钮）
  const getDisplayItems = () => {
    if (isExpanded || !showMore) return items;
    if (!hiddenContainerRef.current || items.length === 0) return [];

    const itemsEl = hiddenContainerRef.current.querySelectorAll('.select-item');
    const visibleItems = [];
    let currentHeight = 0;
    const singleRowHeight = itemsEl[0].getBoundingClientRect().height;
    const rowGap = parseInt(getComputedStyle(hiddenContainerRef.current).rowGap) || 0;
    const maxAllowedHeight = singleRowHeight * rowLimit + rowGap * (rowLimit - 1);

    for (let i = 0; i < itemsEl.length; i++) {
      const itemHeight = itemsEl[i].getBoundingClientRect().height;
      const addedHeight = currentHeight + itemHeight + (i > 0 ? rowGap : 0);
      // 如果加上当前项会超出高度，停止添加
      if (addedHeight > maxAllowedHeight) break;
      visibleItems.push(items[i]);
      currentHeight = addedHeight;
    }

    // 最后一个位置留给More按钮，所以移除最后一个子项
    if (visibleItems.length > 0 && items.length > visibleItems.length) {
      visibleItems.pop();
    }
    return visibleItems;
  };

  const displayItems = getDisplayItems();

  return (
    <div className="expandable-select-container" ref={containerRef}>
      {/* 隐藏容器：仅用于计算总高度，不显示在页面 */}
      <div 
        className="hidden-container" 
        ref={hiddenContainerRef}
        style={{ position: 'absolute', visibility: 'hidden', height: 'auto', width: '100%' }}
      >
        {items.map((item, idx) => (
          <div key={idx} className="select-item">{item}</div>
        ))}
      </div>

      {/* 实际显示的容器 */}
      <div className="visible-container">
        {displayItems.map((item, idx) => (
          <div key={idx} className="select-item">{item}</div>
        ))}
        {showMore && !isExpanded && (
          <button className="more-btn" onClick={() => setIsExpanded(true)}>
            +{items.length - displayItems.length} more
          </button>
        )}
        {isExpanded && (
          <button className="less-btn" onClick={() => setIsExpanded(false)}>
            Show less
          </button>
        )}
      </div>
    </div>
  );
};

export default ExpandableSelect;

配套CSS样式 #

.expandable-select-container {
  position: relative;
  width: 300px; /* 可根据需求调整宽度 */
}

.visible-container, .hidden-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 子项之间的间距 */
}

.select-item {
  padding: 4px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  white-space: nowrap;
}

.more-btn, .less-btn {
  padding: 4px 8px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

关键说明 #

• 隐藏容器的作用是在不影响页面布局的前提下，准确计算所有子组件的总高度
• 通过getBoundingClientRect()获取元素实际高度，适配不同尺寸的子组件和行间距
• 展开/收起状态切换后，会自动重新计算布局（依赖useEffect监听items变化）

内容的提问来源于stack exchange，提问作者alhussien aldali