Jadikan prop React sebagai pilihan dan diperlukan dalam TypeScript berdasarkan prop lain

Question

Saya mempunyai komponen bekas butang React yang mengembalikan butang biasa, butang ikon atau butang ikon sahaja berdasarkan jenis yang disediakan oleh prop yang digunakan oleh pengguna. Berikut ialah definisi jenis yang berkaitan untuk ButtonContainer组件与Props:

type ButtonWrapperProp = {
    label?:string;
    icon?:React.ReactNode;
    onClick:()=>void;
    type:'text'|'icon'|'iconOnly';

}

export const ButtonContainer = (props: ButtonWrapperProps) => {
    const {
        type = 'text',
        onClick,
        icon = <></>,
        label = '',
    } = props;

    const rendorButton = () => {
        switch (type) {
            case 'text':
                return (
                    <Button onClick={onClick}>{label}  <Button/>
                );

            case 'iconOnly':
                return (
                     <IconButton onClick={onClick}>
                       {icon}
                     </IconButton>
                );

            case 'icon':
                return (
                     <Button startIcon={icon}>
                       {label}
                     </Button>
                );

            default:
                return (
                    <Button onClick={onClick}>{label}  <Button/>
                );
        }
    };
    return <>{rendorButton()}</>;
};

Begini cara saya menggunakan komponen ButtonContainer:

<ButtonContainer type="iconOnly" onClick={onClick} icon={<DeleteIcon />}/>
<ButtonContainer type="text" onClick={onClick} label='Text button'/>
<ButtonContainer type="icon" onClick={onClick} label='Text and icon button' icon={<DeleteIcon />}/>

Dalam kod di atas, prop ikon adalah pilihan kerana ia hanya digunakan untuk butang ikon dan butang biasa dengan ikon. Saya mahu prop ikon menjadi pilihan hanya jika jenis yang diluluskan daripada ButtonContainer ialah teks dan ia harus menjadi prop yang diperlukan jika jenis yang dihantar kepada ButtonContainer ialah ikon atau iconOnly.

Answer 1

Saya akan memilih untuk menggunakan Bezakan Jenis Kesatuan.

Atribut jenis bertindak sebagai diskriminasi, membolehkan anda mengecilkan ButtonWrapperProps kepada ahli kesatuan.

Juga ambil perhatian bahawa saya boleh membuat setiap sifat ahli kesatuan diperlukan, yang memberikan pengalaman yang menarik apabila menggunakannya - TS cukup bijak untuk membayangkan sifat tambahan yang diperlukan selepas jenis ditetapkan.

type TextButtonProps = {
  type:'text'
  label:string;
  onClick:()=>void;
}

type IconOnlyButtonProps = {
  type:'iconOnly'
  icon:React.ReactNode;
  onClick:()=>void;
}

type IconButtonProps = {
  type:'icon'
  icon:React.ReactNode;
  label:string;
  onClick:()=>void;
}

type ButtonWrapperProps = TextButtonProps | IconOnlyButtonProps | IconButtonProps;

export const ButtonContainer = (props: ButtonWrapperProps) => {
  const renderButton = () => {
      switch (props.type) {
          case 'text':
              return (
                  <Button onClick={props.onClick}>{props.label}  </Button>
              );

          case 'iconOnly':
              return (
                   <IconButton onClick={props.onClick}>
                     {props.icon}
                   </IconButton>
              );

          case 'icon':
              return (
                   <Button startIcon={props.icon}>
                     {props.label}
                   </Button>
              );
      }
  };
  return <>{renderButton()}</>;
};