判別可能なユニオン型を用いたコンポーネントのProps制御
6410 ワード
コンポーネントの実装で「特定のPropsの値を見て他のPropsを受け取るかどうか」を制御する実装がしたい場合に判別可能なユニオン型が便利です。
判別可能なユニオン型
type C = A | Bという型で、AとBが共通のプロパティを持っていてそのプロパティの値を見ることでCがAなのかBなのか判別できる型のことです。
詳しくはこちら
コンポーネントのProps制御
例えば、typeというPropsを用意してtype === 'リンク'ならリンクを表示して、type === 'button'ならボタンを表示するようなコンポーネントを実装するとします。この場合、リンクならhrefが必要ですが、onClick用の関数は不要です。逆に、ボタンならhrefは不要ですが、onClick用の関数が必要です。
実装
import { VFC } from 'react'
type LinkProps = {
type: 'link'
href: string
}
type ButtonProps = {
type: 'button'
onClick: () => void
}
type Props = LinkProps | ButtonProps
const LinkOrButton: VFC<Props> = (props) => {
if (props.type === 'link') {
return <a href={props.href}>リンク</a>
} else {
return <button onClick={props.onClick}>ボタン</button>
}
}
export default LinkOrButton
コンポーネントを使う時
<LinkOrButton type="link" href="http://example.com/" />
<LinkOrButton type="button" onClick={() => {alert('hello')}} />
判別可能なユニオン型を使うことでコンポーネントに使わないPropsを渡さずに済みます。
Author And Source
この問題について(判別可能なユニオン型を用いたコンポーネントのProps制御), 我々は、より多くの情報をここで見つけました https://zenn.dev/yukishinonome/articles/b1b4b0d890468b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol