J'ai un composant conteneur de boutons React qui renvoie un bouton normal, un bouton icône ou un bouton icône uniquement en fonction du type fourni par l'accessoire utilisé par l'utilisateur. Voici les définitions de types pertinentes pour 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()}</>;
};
Voici comment j'utilise le composant 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 />}/>
Dans le code ci-dessus, l'accessoire icône est facultatif car il n'est utilisé que pour les boutons d'icônes et les boutons normaux avec des icônes. Je souhaite que le accessoire d'icône soit facultatif uniquement si le type transmis par ButtonContainer est du texte et il devrait s'agir d'un accessoire obligatoire si le type transmis à ButtonContainer est une icône ou iconOnly.
![[Web front-end] Démarrage rapide de Node.js](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()}</>; };