Machen Sie React-Requisiten optional und in TypeScript erforderlich, basierend auf anderen Requisiten

Question

Ich habe eine React-Button-Containerkomponente, die basierend auf dem Typ, der von der vom Benutzer verwendeten Requisite bereitgestellt wird, einen regulären Button, einen Icon-Button oder einen Nur-Icon-Button zurückgibt. Hier sind die relevanten Typdefinitionen für 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()}</>;
};

So verwende ich die ButtonContainer-Komponente:

<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 />}/>

Im obigen Code ist die Symbol-Requisite optional, da sie nur für Symbolschaltflächen und normale Schaltflächen mit Symbolen verwendet wird. Ich möchte, dass die Icon-Requisite nur dann optional ist, wenn der von ButtonContainer übergebene Typ Text ist, und sie sollte eine erforderliche Requisite sein, wenn der an ButtonContainer übergebene Typ icon oder iconOnly ist.

Answer 1

我会选择使用辨别联合类型。

type属性作为一个辨别器，允许你将ButtonWrapperProps缩小到联合成员。

还要注意，我可以将每个联合成员的属性设为必需的，这样在使用时可以获得良好的体验 - 在设置了类型后，TS足够智能，能够提示哪些额外的属性是必需的。

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()}</>;
};