⛳
ReactのRefをTypeSafeに独自実装する際のまとめ
タイプセーフにReactのRefを独自実装する際、毎回忘れて調べなおしているので覚書
import { forwardRef, ForwardRefRenderFunction, useImperativeHandle } from 'react';
export interface HogeElement {
bar: string;
buzz: () => void;
}
export interface HogeProps {
bizz: string;
}
const HogeRefFunction: ForwardRefRenderFunction<HogeElement, HogeProps> = ({
bizz,
}, ref)=> {
useImperativeHandle(ref, () => {
return {
bar: '参照等',
buzz: () => {
// 処理群
}
}
})
return <div>{bizz}</div>;
}
export const Hoge = forwardRef(HogeRefFunction);
各種命名規則
- HTMLライクにするため、文末にElementを記述
HogeElement
- HTMLDivElement的な勢い
- Propsを文末に記述
備考
RefFunctionとコンポーネントを命名しておき、無名化を防ぐ
最終的に型は求まるため、forwardRefでwrapすれば完成
Discussion