javascript - องค์ประกอบตัวเลือกที่กำหนดเองของ Antd สำหรับ Select

เป็นไปได้หรือไม่ที่จะทำให้ตัวเลือกปรับแต่งได้ใน antd select?

นี่คือสิ่งที่ฉันคิดออกมา ฉันต้องการให้กล่องทำเครื่องหมายแสดงพร้อมกับตัวเลือก

อย่างไรก็ตาม ฉันได้รับตัวเลือกเริ่มต้น

นี่คือคอมโพเนนต์ 'CustomSelect' และ 'CustomOption' ของฉัน

// CustomSelect.tsx

import React from "react";
import { Select as AntSelect } from "antd";
import { CustomSelectStyle, Wrapper } from "./styles";
import { ReactComponent as ChevronDown } from "@assets/images/chevron-down.svg";
import { NewSelectProps } from "./types";
import { SelectValue } from "antd/lib/select";
import CustomOption from "./CustomOption";
function CustomSelect<T extends SelectValue>({
  width = "normal",
  mode,
  error = false,
  children,
  ...props
}: NewSelectProps<T>) {
  return (
    <Wrapper width={width}>
      <CustomSelectStyle onError={error} />
      <AntSelect optionLabelProp="label" mode={mode} {...props}>
        {children}
      </AntSelect>
      <ChevronDown className="dropdown-icon" />
    </Wrapper>
  );
}

CustomSelect.Option = CustomOption;

export default CustomSelect;

// 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, ...props }: CustomOptionProps) {
  return (
    <Option {...props}>
      {type === "checkbox" && <Checkbox />}
      {children}
    </Option>
  );
}

export default CustomOption;

ฉันรู้ว่าฉันสามารถทำแบบนี้ได้...

<CustomSelect
  onChange={value => console.log(value)}
  error={false}
  mode="multiple"
>
  <CustomSelect.Option value={"korea"}>
    <TextWithCheckbox checked={false}>
      korea
    </TextWithCheckbox>
  </CustomSelect.Option>
  <CustomSelect.Option value={"china"}>
    <TextWithCheckbox checked={false}>
      china
    </TextWithCheckbox>
  </CustomSelect.Option>
</CustomSelect>

แต่สิ่งที่ฉันต้องการคือการสร้างส่วนประกอบตัวเลือกใหม่

คำตอบ #1

คุณไม่จำเป็นต้องมีคอมโพเนนต์ CustomOption แบบกำหนดเอง คุณสามารถจัดการตัวเรนเดอร์ตัวเลือกแบบกำหนดเองในคอมโพเนนต์ TextWithCheckbox ได้ดังนี้:

const TextWithCheckbox = (props) => {
  return (
    <div>
      <Checkbox checked={props.checked} />
      {props.children}
    </div>
  );
};

คุณสามารถดูตัวอย่างการทำงานสดของโค้ดนี้ได้ที่แซนด์บ็อกซ์นี้