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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我会选择使用辨别联合类型。
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()}</>; };