ReactSelect是否支持可折叠子类别？需额外配置属性吗？

完全可以实现你要的plan和period group可折叠效果，React Select本身没有内置折叠分组功能，但通过自定义组件和状态管理就能搞定，不需要额外第三方依赖，只需调整组件配置和自定义选项渲染逻辑：

步骤1：定义带层级的选项数据 #

先把选项改成分组结构，给分组项添加标识和子选项：

// 扩展选项类型，支持分组
interface GroupedOption {
  label: string;
  value?: string;
  isGroup: boolean;
  options: OptionType[];
  isOpen?: boolean;
}

// 示例选项数据
const groupedOptions: (OptionType | GroupedOption)[] = [
  {
    label: "plan",
    isGroup: true,
    isOpen: false,
    options: [
      { label: "基础套餐", value: "basic-plan" },
      { label: "高级套餐", value: "premium-plan" }
    ]
  },
  {
    label: "period group",
    isGroup: true,
    isOpen: false,
    options: [
      { label: "季度周期", value: "quarter-period" },
      { label: "年度周期", value: "year-period" }
    ]
  },
  { label: "无分组选项", value: "no-group" }
];

步骤2：自定义可折叠的Option组件 #

替换React Select默认的选项渲染组件，添加折叠/展开逻辑：

import { OptionProps } from "react-select";
import { useState } from "react";

const CollapsibleOption = ({ data, innerProps }: OptionProps<GroupedOption>) => {
  // 分组项逻辑
  if (data.isGroup) {
    const [isOpen, setIsOpen] = useState(data.isOpen || false);

    return (
      <div 
        {...innerProps} 
        style={{ cursor: "pointer", padding: "8px 12px" }}
        onClick={(e) => {
          e.stopPropagation(); // 阻止分组本身被选中
          setIsOpen(!isOpen);
        }}
      >
        <span>{data.label}</span>
        <span style={{ float: "right" }}>{isOpen ? "▼" : "▶"}</span>
        {/* 展开时显示子选项 */}
        {isOpen && (
          <div style={{ paddingLeft: "20px", marginTop: "6px" }}>
            {data.options.map(opt => (
              <div 
                key={opt.value} 
                {...innerProps}
                style={{ padding: "6px 0", cursor: "pointer" }}
                onClick={(e) => innerProps.onClick(e)} // 触发子选项选中逻辑
              >
                {opt.label}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  // 普通选项渲染
  return (
    <div {...innerProps} style={{ padding: "8px 12px" }}>
      {data.label}
    </div>
  );
};

步骤3：修改你的React Select组件配置 #

添加components属性替换默认Option，同时传入分组后的选项数据：

<ReactSelect<GroupedOption, IsMulti>
  classNamePrefix="react-select"
  tabSelectsValue={false}
  {...props}
  className={classnames('react-select-wrapper', props.className)}
  styles={getStyles<GroupedOption, IsMulti>(props.styles, props.isInvalid, props.isMulti)}
  components={{ Option: CollapsibleOption }} // 挂载自定义组件
  options={groupedOptions} // 传入分组选项
/>

注意事项 #

• 分组项的点击事件要阻止冒泡，避免分组本身被选中
• 如果是多选模式，需要确保子选项的选中状态正常同步
• 样式可以根据你的UI需求调整，比如缩进距离、折叠图标样式等
• 如果需要全局控制所有分组的展开/收起状态，可以把isOpen状态提到父组件中管理，通过props传递给自定义Option

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