Material UI Select底层实现逻辑及自定义React UI库Select组件开发疑问

选项点击事件处理与选中样式实现 #

给自定义选项组件（如SelectItem）添加静态标识属性，Select组件内部遍历子组件时，通过该标识识别有效选项，再通过React.cloneElement向有效选项注入点击事件回调、选中状态和对应样式类：

// Select组件内部子元素处理逻辑
const processedChildren = React.useMemo(() => {
  return React.Children.map(children, (child) => {
    // 仅识别带有效标识的选项组件
    if (child?.type?.isSelectItem) {
      const isSelected = currentValue === child.props.value;
      return React.cloneElement(child, {
        // 合并原有点击事件与组件内置选中逻辑
        onClick: (e) => {
          child.props.onClick?.(e);
          onChange?.(child.props.value, child.props);
        },
        selected: isSelected,
        // 注入选中状态样式类
        className: `${child.props.className || ''} ${isSelected ? 'select-item-active' : ''}`
      });
    }
    // 非选项组件直接原样返回
    return child;
  });
}, [children, currentValue, onChange]);

选项组件定义参考：

const SelectItem = (props) => {
  const { selected, children, className, onClick, ...rest } = props;
  return (
    <div
      className={`select-item ${className}`}
      onClick={onClick}
      {...rest}
    >
      {children}
    </div>
  );
};
// 添加静态标识，用于父组件识别
SelectItem.isSelectItem = true;
SelectItem.displayName = 'SelectItem';

选中样式可通过内置的select-item-active类统一实现，也可暴露selected属性供用户自定义样式。

自定义下拉面板内容与有效选项区分 #

上述方案中的静态标识天然支持该需求：所有未携带isSelectItem静态属性的子组件，都会被判定为非选项内容，直接原样渲染到下拉面板中，不会被计入选项列表、也不会触发选中逻辑。
使用示例如下：

<Select value={selected} onChange={handleChange}>
  {/* 自定义搜索头部，非选项不触发选中 */}
  <div className="select-header">
    <input placeholder="搜索选项" />
  </div>
  <SelectItem value="apple">苹果</SelectItem>
  <SelectItem value="banana">香蕉</SelectItem>
  {/* 自定义分隔线，非选项不触发选中 */}
  <hr className="select-divider" />
  {/* 自定义分组标题，非选项不触发选中 */}
  <div className="select-group-title">进口水果</div>
  <SelectItem value="cherry">车厘子</SelectItem>
  <SelectItem value="kiwi">奇异果</SelectItem>
</Select>

内容的提问来源于stack exchange，提问作者mahdi ben moumen