React中基于Material UI实现按公司分组的<optgroup>下拉选择组件方案

要实现按company分组的带<optgroup>的Material UI下拉组件，你需要先把数据按公司分组，再结合OptGroup组件来渲染，具体步骤和代码如下：

第一步：对数据源进行分组处理 #

先把相同company的人员数据归为一组，用数组的reduce方法就能轻松实现：

// 在组件内部处理数据分组
const groupedBrokers = props.floorBrokersDataState?.reduce((groups, broker) => {
  // 以company作为分组的键
  const company = broker.company;
  if (!groups[company]) {
    groups[company] = [];
  }
  groups[company].push(broker);
  return groups;
}, {}) || {};

第二步：修改Select组件渲染逻辑 #

遍历分组后的数据，为每个公司生成一个OptGroup，内部嵌套对应公司的MenuItem：

import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import OptGroup from '@mui/material/OptGroup';

// 渲染部分
<Select 
  labelId="SelectLabel" 
  id="Select" 
  defaultValue="" 
  value={props.state} 
  label="select" 
  onChange={props.SelectChangeHandler}
>
  {/* 遍历所有分组 */}
  {Object.entries(groupedBrokers).map(([companyName, brokersInCompany]) => (
    <OptGroup key={companyName} label={companyName}>
      {/* 渲染当前公司下的所有人员 */}
      {brokersInCompany.map(({ id, name }) => (
        <MenuItem key={id} value={id}>
          {name}
        </MenuItem>
      ))}
    </OptGroup>
  ))}
</Select>

关键细节说明 #

• OptGroup的特性：Material UI的OptGroup组件默认就是不可点击选择的，刚好满足你“分组标签不可点击”的需求，无需额外设置禁用属性。
• key的选择：MenuItem的key建议用唯一的id而非index，避免数据顺序变化时出现渲染异常。
• 空数据兼容：用|| {}处理props.floorBrokersDataState为空的情况，防止遍历时报错。

这样处理后，你的下拉选择器会自动按company分组显示，同一公司的name会归在对应的分组标签下，分组标签无法被选中，完全符合你的需求。

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