Jadikan prop React sebagai pilihan dan diperlukan dalam TypeScript berdasarkan prop lain
P粉738046172
P粉738046172 2023-09-17 13:42:00
0
1
695

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.

P粉738046172
P粉738046172

membalas semua(1)
P粉803444331

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()}</>;
};
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan