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 untukButtonContainer组件与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 (
Begini cara saya menggunakan komponen ButtonContainer:
}/> }/>
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)
Saya akan memilih untuk menggunakanBezakan 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 ( ); case 'iconOnly': return ( {props.icon} ); case 'icon': return ( ); } }; return <>{renderButton()}; };