如何实现带下拉菜单的标签页溢出功能？

嗨，我之前在React项目里也碰到过一模一样的需求，这种“标签太多时自动把多余的塞进下拉菜单”的交互确实挺实用的，我给你分享两种靠谱的实现思路：

一、直接用现成的第三方组件库（最省心） #

其实有不少React UI库已经内置了这种溢出标签的功能，不用自己从零造轮子：

• react-overflow-tabs：这个库就是专门为这种场景设计的，配置简单，开箱即用。你只需要安装它，传入你的标签数据，它会自动处理溢出逻辑，把放不下的标签塞进下拉菜单里。
  举个简单的使用示例：

  import OverflowTabs from 'react-overflow-tabs';
  
  const MyTabs = () => {
    const tabs = [
      { label: '首页', key: 'home' },
      { label: '用户管理', key: 'user' },
      // 可以继续添加更多标签
    ];
  
    return (
      <OverflowTabs
        tabs={tabs}
        activeKey="home"
        onTabChange={(key) => console.log('切换到标签:', key)}
      />
    );
  };
  

• MUI（原Material-UI）：如果你的项目已经在用MUI，它的Tabs组件可以通过自定义TabList配合Menu组件实现下拉式溢出。虽然需要写一点自定义逻辑，但能和现有项目的样式体系无缝衔接。

二、自己动手实现（灵活度更高） #

如果不想依赖第三方库，自己实现也不难，核心是计算标签容器和每个标签的宽度，动态划分显示标签和溢出标签，步骤大概是这样：

1. 用useRef获取标签容器和每个标签的DOM元素，方便后续计算宽度。
2. 在组件挂载和窗口resize时，计算容器的可用宽度，遍历所有标签累加宽度，直到超过容器宽度，把剩下的标签归入溢出列表。
3. 渲染显示的标签列表，再加上一个下拉按钮，点击后弹出菜单展示溢出的标签。

给你一个简化版的代码示例参考：

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

const CustomOverflowTabs = ({ tabs, activeKey, onTabChange }) => {
  const [visibleTabs, setVisibleTabs] = useState([]);
  const [overflowTabs, setOverflowTabs] = useState([]);
  const [showOverflowMenu, setShowOverflowMenu] = useState(false);
  const containerRef = useRef(null);
  const tabRefs = useRef([]);

  useEffect(() => {
    const calculateOverflow = () => {
      if (!containerRef.current) return;
      const containerWidth = containerRef.current.offsetWidth;
      let totalWidth = 0;
      const visible = [];
      const overflow = [];

      tabs.forEach((tab, index) => {
        const tabWidth = tabRefs.current[index]?.offsetWidth || 0;
        // 预留下拉按钮的宽度（比如80px）
        if (totalWidth + tabWidth + 80 <= containerWidth) {
          visible.push(tab);
          totalWidth += tabWidth;
        } else {
          overflow.push(tab);
        }
      });

      setVisibleTabs(visible);
      setOverflowTabs(overflow);
    };

    calculateOverflow();
    window.addEventListener('resize', calculateOverflow);
    return () => window.removeEventListener('resize', calculateOverflow);
  }, [tabs]);

  return (
    <div ref={containerRef} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '8px' }}>
      {visibleTabs.map((tab, index) => (
        <button
          key={tab.key}
          ref={(el) => (tabRefs.current[index] = el)}
          style={{
            padding: '8px 16px',
            backgroundColor: activeKey === tab.key ? '#1890ff' : 'transparent',
            color: activeKey === tab.key ? '#fff' : '#333',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            transition: 'background-color 0.2s'
          }}
          onClick={() => onTabChange(tab.key)}
        >
          {tab.label}
        </button>
      ))}
      {overflowTabs.length > 0 && (
        <div style={{ position: 'relative' }}>
          <button
            onClick={() => setShowOverflowMenu(!showOverflowMenu)}
            style={{
              padding: '8px 12px',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              backgroundColor: '#f5f5f5'
            }}
          >
            更多 ▼
          </button>
          {showOverflowMenu && (
            <div style={{
              position: 'absolute',
              top: '100%',
              right: 0,
              marginTop: '4px',
              border: '1px solid #eee',
              borderRadius: '4px',
              backgroundColor: '#fff',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              zIndex: 100
            }}>
              {overflowTabs.map((tab) => (
                <div
                  key={tab.key}
                  style={{
                    padding: '8px 16px',
                    cursor: 'pointer',
                    backgroundColor: activeKey === tab.key ? '#e6f7ff' : 'transparent'
                  }}
                  onClick={() => {
                    onTabChange(tab.key);
                    setShowOverflowMenu(false);
                  }}
                >
                  {tab.label}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

这个自定义实现的好处是完全可以根据你的项目样式需求调整，比如修改按钮样式、下拉菜单的外观等等。

备注：内容来源于stack exchange，提问作者Nuwan Inguruwaththa