如何限制Ant Design多选Select标签数量并实现聚合显示？

Ant Design 的多选 Select 组件原生提供了 maxTagCount 和 maxTagPlaceholder 属性，刚好能匹配你的需求，无需通过 tagRender 逐个处理标签：

• 选中项数量少于4个时，正常展示所有标签；
• 选中项数量≥4个时，隐藏单个标签，仅显示统计总数的占位标签。

修改后的代码示例：

import { Select } from 'antd';

// 假设已定义 selectedValues、handleChange 等变量
const CustomMultiSelect = () => {
  return (
    <Select
      className='custom-multiple-select'
      popupClassName='custom-popup'
      mode='multiple'
      placeholder={placeholder}
      size={size}
      defaultValue={['a10', 'c12']}
      onChange={handleChange}
      options={options}
      suffixIcon={
        <img
          className={`down-arrow ${isDropDownOpen ? 'rotate' : 'rotate-backward'}`}
          src={DownArrow}
          alt='down arrow icon'
        />
      }
      onDropdownVisibleChange={() => setDropDownOpen(!isDropDownOpen)}
      // 核心配置：超过3个（即≥4个）时触发占位标签
      maxTagCount={3}
      maxTagPlaceholder={() => (
        <span>Numbers of Campaigns: {selectedValues.length}</span>
      )}
    />
  );
};

为什么不推荐用 tagRender？ #

tagRender 的设计逻辑是为每个选中项生成对应标签，无法直接让它只渲染一个总标签。而 maxTagCount + maxTagPlaceholder 是 Ant Design 官方针对批量隐藏标签场景提供的方案，更贴合需求，代码也更简洁。

如果一定要用 tagRender 实现（不推荐），可以通过判断当前项是否为第一个，且总数≥4时渲染总标签，其他项返回 null，但这种方式会产生空标签节点，不如官方方案优雅：

const renderTags = (props) => {
  const { label, index } = props;
  const tagCount = selectedValues.length;

  if (tagCount < 4) {
    return <span className='custom-tag-item'>{label}</span>;
  }

  // 仅在第一个项的位置渲染总标签，其他项返回null
  return index === 0 ? <span>Numbers of Campaigns: {tagCount}</span> : null;
};

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