Ant design在选项属性中选择组件OptGroup

Ant Design 是一个流行的 React UI 组件库，它提供了一系列高质量的组件来帮助开发者快速构建用户界面。OptGroup 是 Ant Design 中的一个组件，用于对 Select 组件中的选项进行分组，以提高用户体验。

基础概念

OptGroup 组件允许你将多个 Option 组件组合在一起，形成一个逻辑上的分组。这在选项列表较长或者需要按类别组织选项时非常有用。

类型

OptGroup 组件本身没有太多类型上的变化，它主要通过 label 属性来定义分组的标题。

应用场景

大型下拉菜单：当 Select 组件中的选项非常多时，使用 OptGroup 可以将选项分成几个部分，使用户更容易浏览。
分类展示：如果选项可以按某种逻辑分类，如按部门、按日期等，使用 OptGroup 可以清晰地展示这些分类。

示例代码

下面是一个使用 OptGroup 的简单示例：

import React from 'react';
import { Select } from 'antd';

const { Option, OptGroup } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

const options = [
  {
    label: 'Manager',
    value: 'manager',
    children: [
      { label: 'Tom', value: 'tom' },
      { label: 'Jerry', value: 'jerry' },
    ],
  },
  {
    label: 'Engineer',
    value: 'engineer',
    children: [
      { label: 'Mike', value: 'mike' },
      { label: 'Alice', value: 'alice' },
    ],
  },
];

ReactDOM.render(
  <Select defaultValue="mike" style={{ width: 120 }} onChange={handleChange}>
    {options.map((group, index) => (
      <OptGroup key={index} label={group.label}>
        {group.children.map((child, idx) => (
          <Option key={idx} value={child.value}>
            {child.label}
          </Option>
        ))}
      </OptGroup>
    ))}
  </Select>,
  mountNode,
);