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.
![[Web front-end] Permulaan pantas 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()}</>; };