ReactのforwardRefの型定義
Next.jsのnext/linkにあるIf the child is a function componentをtypescriptでやろうと思ったら、型定義にはまったのでメモとして残します。
const MyButton = React.forwardRef(({ onClick, href }, ref) => {
return (
<a href={href} onClick={onClick} ref={ref}>
Click Me
</a>
)
})
以下のようにしたら動作しました。
interface Props {
onClick: React.MouseEventHandler<HTMLAnchorElement>,
href: string,
}
type RefType = React.LegacyRef<HTMLAnchorElement>
const MyButton = React.forwardRef(({ onClick, href }: Props, ref: RefType) => {
return (
<a href={href} onClick={onClick} ref={ref}>
Click Me
</a>
)
})
最初はこんな感じに書いていました…
const MyButton = React.forwardRef<RefType, Props>(({ onClick, href }, ref) => {
return (
<a href={href} onClick={onClick} ref={ref}>
Click Me
</a>
)
})
ディスカッション
コメント一覧
まだ、コメントがありません