ユーザーが使用するプロップによって提供されるタイプに基づいて、通常のボタン、アイコン ボタン、またはアイコンのみのボタンを返す React ボタン コンテナ コンポーネントがあります。以下は、ButtonContainer
コンポーネントとProps
の関連する型定義です:
ButtonContainer コンポーネントの使用方法は次のとおりです:
リーリー上記のコードでは、アイコン プロップはアイコンと通常のボタンを持つアイコン ボタンにのみ使用されるため、オプションです。 ButtonContainer から渡されたタイプがテキストの場合にのみアイコン プロパティをオプションにして、ButtonContainer に渡されたタイプが icon または iconOnly の場合は必須プロパティにする必要があります。
私はユニオンの種類を区別するを使用することを選択します。
type 属性は識別子として機能し、ButtonWrapperProps を共用体メンバーに絞り込むことができます。
また、各共用体メンバーのプロパティを必須にすることができることにも注意してください。これにより、それらを使用するときに優れたエクスペリエンスが得られます。TS は、型が設定された後にどの追加プロパティが必要であるかをプロンプトするのに十分賢いです。
リーリー