Antd Select组件自定义下拉Menu失效及dropdownRender用法咨询

核心问题：dropdownRender未返回JSX #

你的dropdownRender函数使用大括号包裹逻辑，但没有return对应的JSX元素，导致下拉面板渲染为空，这是无法加载选项的直接原因。

其他错误点 #

1. defaultValue配置错误：多选模式下，defaultValue应为选中值的数组（如['A']），而非整个options对象数组
2. 冗余属性：自定义下拉面板时，optionLabelProp无需设置，因为你没有使用Antd默认的<Option>组件
3. 状态逻辑可优化：当前用label存储选中值，建议统一用value（与Select的value属性语义一致），避免混淆
4. 布局问题：Checkbox的float: left会导致布局错乱，建议用flex布局调整结构

修正后的完整代码 #

import { useState } from 'react';
import { Select, Menu, Checkbox } from 'antd';

const YourComponent = () => {
  // 改用value存储选中项，和Select的value语义一致
  const [selectedItems, setSelectedItems] = useState([]);

  const options = [
    { key: 'A', value: 'A', label: '选项A' },
    { key: 'S', value: 'S', label: '选项S' },
    { key: 'W', value: 'W', label: '选项W' },
    { key: 'C', value: 'C', label: '选项C' },
  ];

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      // 正确设置默认选中值（可选）
      defaultValue={[]}
      showSearch={true}
      allowClear
      placeholder={
        <div>
          <img
            src={xImg}
            alt="xImg"
            style={{ width: 14, height: 14, objectFit: 'cover', marginRight: 4 }}
          />
          Place Holder
        </div>
      }
      style={{ width: '100%' }}
      // dropdownRender必须返回JSX，这里用箭头函数隐式返回
      dropdownRender={() => (
        <Menu style={{ width: 256, padding: 8 }}>
          {options.map((option) => (
            <Menu.Item
              key={option.key}
              onClick={() => {
                const isSelected = selectedItems.includes(option.value);
                setSelectedItems(prev => 
                  isSelected 
                    ? prev.filter(val => val !== option.value)
                    : [...prev, option.value]
                );
              }}
              style={{ display: 'flex', alignItems: 'center', gap: 8 }}
            >
              <Checkbox checked={selectedItems.includes(option.value)} />
              {option.label}
            </Menu.Item>
          ))}
        </Menu>
      )}
      // 自定义下拉后需手动绑定清除逻辑
      onClear={() => setSelectedItems([])}
    />
  );
};

export default YourComponent;

关键修正说明 #

• dropdownRender返回JSX：将原来的{ <Menu>...</Menu> }改为( <Menu>...</Menu> )（隐式返回），或显式添加return <Menu>...</Menu>
• 统一选中值类型：用option.value替代label存储选中状态，符合Select组件的设计语义
• 优化布局：给Menu.Item设置flex布局，让Checkbox与标签对齐更自然
• 补充清除逻辑：自定义下拉面板后，需手动绑定onClear事件实现清空选中状态的功能

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