⌨️
Reactで安全にdetailsタグの開閉のfunctionを作る
概要
アコーディオンを作りたいときにdetailsタグを使うことがあると思います。
開閉をコントロールするとき、アサーション関数を使うと安全に使えるよという記事になります。
アサーション関数ついて
アサーション関数は、型ガード関数の一つとして使います。期待する型でなければ自分で作った例外を投げることができます。
function assertIsString(value: unknown): asserts value is string {
if (typeof value !== "string") {
throw new Error("value is not a string");
}
}
値が文字列であることを確認して、そうでない場合にはエラーを表示します。
detailsタグの扱い
detailsタグの開閉状態は、onToggleイベントを使って確認できますが、open属性の有無を確認することは保証されていません。そのため、アサーション関数を活用してこの属性が存在することを確認することが大切です。例として、以下のようなコードが考えられます。
// タグ
<details onToggle={handleToggle}>
// 関数
const handleToggle: ReactEventHandler<HTMLDetailsElement> = (node) => {
assertDetail(node.target);
console.log(node.target.open);
setToggle(node.target.open);
};
// アサーション関数
const assertDetail: AssertDetailElement = (target) => {
if (!(target instanceof HTMLDetailsElement)) {
throw new Error("target is not an instance of HTMLDetailsElement");
}
};
このようにアサーション関数を用いることで、開閉状態を安全に扱えます。
参考
Discussion