如何在react-select下拉选项中按层级条件设置缩进间距

功能支持性说明 #

react-select 原生支持该需求，无需引入额外依赖，通过官方提供的自定义组件、样式覆盖API即可实现。

具体实现步骤 #

• 第一步：给下拉选项数据新增层级标识字段
  给每个选项添加level字段标记层级深度，父级选项设为0，子级为1，孙级为2，以此类推，示例数据如下：

  const options = [
    { value: 'fruit', label: '水果分类', level: 0 },
    { value: 'apple', label: '苹果', level: 1 },
    { value: 'red-fuji', label: '红富士', level: 2 },
    { value: 'green-apple', label: '青苹果', level: 2 },
    { value: 'banana', label: '香蕉', level: 1 },
    { value: 'vegetable', label: '蔬菜分类', level: 0 },
    { value: 'leafy', label: '叶菜类', level: 1 },
  ]
  

• 第二步：自定义Option组件，根据层级设置缩进
  覆盖react-select默认的Option组件，根据每个选项的level值动态计算左侧缩进距离：

  import Select, { components } from 'react-select';
  
  // 自定义Option组件
  const LevelOption = (props) => {
    const { data } = props;
    // 每级缩进20px，可根据需求调整数值
    const indent = (data.level || 0) * 20;
    // 加上默认的左侧边距12px，保证和默认样式对齐
    const finalPaddingLeft = indent + 12;
    return (
      <components.Option 
        {...props} 
        style={{ ...props.style, paddingLeft: `${finalPaddingLeft}px` }}
      />
    );
  };
  

• 第三步：给Select组件传入自定义配置
  将自定义的Option组件绑定到Select的components属性上即可生效：

  function LevelSelect() {
    return (
      <Select
        options={options}
        components={{ Option: LevelOption }}
        // 其他常规配置，比如onChange、placeholder、isSearchable等
      />
    )
  }
  

可选优化 #

如果需要实现层级连接线、父子级联动选中、折叠展开等扩展效果，只需要在上述逻辑基础上扩展Option组件样式、添加对应状态字段即可，不需要修改核心实现逻辑。

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