Antd Select自定义Option组件问题：无法渲染带复选框的选项

你的需求完全可以实现，核心是利用Antd Select的Option组件会自动接收selected属性（多选模式下），将其与自定义的Checkbox状态绑定，同时封装独立的CustomOption组件避免重复嵌套。

修正后的组件代码 #

CustomOption.tsx

import { Select as AntdSelect, Checkbox } from "antd";
import { OptionProps } from "antd/lib/select";

const { Option } = AntdSelect;
interface CustomOptionProps extends OptionProps {
  type: "checkbox" | "default";
}

function CustomOption({ type, children, selected, ...props }: CustomOptionProps) {
  return (
    <Option {...props}>
      {type === "checkbox" && <Checkbox checked={selected} />}
      {children}
    </Option>
  );
}

export default CustomOption;

使用示例

<CustomSelect
  onChange={(value) => console.log(value)}
  error={false}
  mode="multiple"
>
  <CustomSelect.Option type="checkbox" value="korea">korea</CustomSelect.Option>
  <CustomSelect.Option type="checkbox" value="china">china</CustomSelect.Option>
  {/* 也可以保留默认样式的选项 */}
  <CustomSelect.Option type="default" value="japan">japan</CustomSelect.Option>
</CustomSelect>

关键说明 #

• 选中状态联动：在多选模式下，Antd Select会自动给Option传递selected属性，将其绑定到Checkbox的checked属性，就能实现选项选中状态与Checkbox的同步。
• 简化使用逻辑：封装后的CustomOption只需通过type="checkbox"参数一键启用复选框样式，无需每次手动嵌套额外组件。
• 样式兼容：如果需要调整复选框与文字的间距，可给Checkbox添加自定义className，通过CSS调整布局。

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