React-select多选时动态折叠溢出项至‘...’的实现问题

不用完全重写React-select组件，通过其自带的自定义渲染能力结合尺寸监听就能实现需求，以下是具体实现方案：

核心思路 #

• 利用React-select的renderValue属性自定义已选选项的渲染逻辑，避免重写整个组件
• 使用原生ResizeObserver监听容器尺寸变化，实时更新可显示的选项数量
• 通过获取每个已选标签的实际宽度，结合容器宽度计算可容纳的最大选项数，超出部分用「...X项」折叠显示

完整代码示例 #

import React, { useState, useRef, useEffect } from 'react';
import Select from 'react-select';

const CollapsibleMultiSelect = ({ options, value, onChange, ...props }) => {
  const [visibleCount, setVisibleCount] = useState(value?.length || 0);
  const containerRef = useRef(null);
  const tagRefs = useRef([]);

  // 计算可显示的标签数量
  const calculateVisibleCount = () => {
    if (!containerRef.current || value?.length === 0) return;

    const containerWidth = containerRef.current.offsetWidth;
    let totalWidth = 0;
    let count = 0;

    // 预留折叠项的宽度（可根据实际样式调整）
    const collapseWidth = 80;
    const remainingWidth = containerWidth - collapseWidth;

    for (let i = 0; i < value.length; i++) {
      const tagWidth = tagRefs.current[i]?.offsetWidth || 0;
      if (totalWidth + tagWidth <= remainingWidth) {
        totalWidth += tagWidth;
        count++;
      } else {
        break;
      }
    }

    setVisibleCount(count === value.length ? value.length : count);
  };

  // 监听容器尺寸变化
  useEffect(() => {
    const observer = new ResizeObserver(calculateVisibleCount);
    containerRef.current && observer.observe(containerRef.current);

    return () => {
      containerRef.current && observer.unobserve(containerRef.current);
    };
  }, [value]);

  // 初始化或选中项变化时重新计算
  useEffect(() => {
    calculateVisibleCount();
  }, [value]);

  // 自定义渲染已选值
  const renderValue = (selected) => {
    if (!selected || selected.length === 0) return null;

    const visibleTags = selected.slice(0, visibleCount);
    const hiddenCount = selected.length - visibleCount;

    return (
      <div 
        ref={containerRef} 
        style={{ 
          display: 'flex', 
          flexWrap: 'nowrap', 
          gap: '4px', 
          overflow: 'hidden',
          padding: '2px 4px'
        }}
      >
        {visibleTags.map((option, index) => (
          <div
            key={option.value}
            ref={(el) => (tagRefs.current[index] = el)}
            style={{
              padding: '4px 8px',
              backgroundColor: '#e2e8f0',
              borderRadius: '4px',
              whiteSpace: 'nowrap',
              cursor: 'default'
            }}
          >
            {option.label}
          </div>
        ))}
        {hiddenCount > 0 && (
          <div style={{ 
            padding: '4px 8px', 
            color: '#64748b', 
            whiteSpace: 'nowrap',
            cursor: 'default'
          }}>
            ...{hiddenCount}项
          </div>
        )}
      </div>
    );
  };

  return (
    <Select
      isMulti
      options={options}
      value={value}
      onChange={onChange}
      renderValue={renderValue}
      {...props}
    />
  );
};

// 使用示例
const App = () => {
  const options = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'orange', label: '橙子' },
    { value: 'grape', label: '葡萄' },
    { value: 'watermelon', label: '西瓜' },
    { value: 'pineapple', label: '菠萝' },
  ];

  const [selected, setSelected] = useState([]);

  return (
    <div style={{ width: '300px', margin: '20px' }}>
      <CollapsibleMultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        placeholder="请选择水果"
      />
    </div>
  );
};

export default App;

关键细节说明 #

1. renderValue属性：React-select提供的自定义渲染入口，直接替换已选选项的展示逻辑，无需修改组件核心代码
2. ResizeObserver：原生API，无需额外依赖，精准监听容器尺寸变化，触发重新计算
3. 标签宽度计算：通过ref获取每个已选标签的实际渲染宽度，累加判断是否超出容器可容纳范围
4. 样式自定义：标签和折叠项的样式可以根据项目设计风格自由调整，保持视觉统一

内容的提问来源于stack exchange，提问作者Christian Tchaikovsky