forwardRef<T, P>のTにuseImperativeHandle用のHandlerとHTMLDivElementの両方を設定する方法

Question

掲題について、以下の状況で不明なことがあります。

■前提
・子コンポーネント（Child）のDOMにアニメーションを設定
・Child内には任意のタイミングでアニメーションを実行するanimate()関数を実装
・親コンポーネント（Parent）において、Childに対するIntersectionObserverを設定し、交差したタイミングでChild.animate()を実行したい

■問題
上記の場合、Parentからは以下のrefを渡す必要があります。
・IntersectionObserverを設定するためのref（Child.Handler）
・Child.animate()を実行するためのref（HTMLDivElement）

ただし、それらのrefはそれぞれ型が異なるため、Child側でTypeErrorが発生してしまいます。
「React.forwardRefにおいて、型の異なるrefをどうやったら受け取れるか」というのが今回詰まっている箇所です。

■簡略化したコード

// 子コンポーネント

export type Handler = {
  animate(): void
}

type Props = {
  onAnimationEnd(): void
  ...
}

export const Child = forwardRef<Handler, Props>((props, ref) => {
  const { onAnimationEnd } = props

  function animate() {
    ...
  }

  useImperativeHandle(ref, () => ({
    animate
  }))

  return (
    <div
      ref={ref} // ←forwardedRef<HTMLDivElement>を受け取らなければいけないのでTypeErrorが発生する
      className="child"
    >
      ...
    </div>
  )
})

// 親コンポーネント
import { useRef } from 'react'
import type { Handler } from './Child'

export const Parent = (props) => {
  const childRef = useRef({} as Handler)

  useEffect(() => {
    const intersectionObserver = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        childRef.animate()
      }
      }, {...})
    intersectionObserver.observe(childRef.current)
  }, [])

  return (
    <>
      <Child
        ref={crossRef}
      />
    </>
  )
}

Answer 1

質問のためにコードを整理していたら気づきました。
そもそもHandlerにanimate()とChildに対するRefを両方設定すれば良いだけでした。

// 子コンポーネント
import { useRef } from 'react'
import type { RefObject } from 'react'

export type Handler = {
  animate(): void
  childRef: RefObject<HTMLDivElement>
}

type Props = {
  onAnimationEnd(): void
  ...
}

export const Child = forwardRef<Handler, Props>((props, ref) => {
  const { onAnimationEnd } = props

  function animate() {
    ...
  }

  const wrapperRef = useRef<HTMLDivElement>(null)

  useImperativeHandle(ref, () => ({
    animate,
    childRef: wrapperRef
  }))

  return (
    <div
      ref={wrapperRef}
      className="child"
    >
      ...
    </div>
  )
})

// 親コンポーネント
import { useRef } from 'react'
import type { Handler } from './Child'

export const Parent = (props) => {
  const childRef = useRef({} as Handler)

  // 
  useEffect(() => {
    const intersectionObserver = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        childRef.current.animate()
      }
      }, {...})
    intersectionObserver.observe(childRef.current.wrapperRef.current)
  }, [])

  return (
    <>
      <Child
        ref={crossRef}
      />
    </>
  )
}