React hooksで子コンポーネントの関数を実行する

TL;DR

forwardRefとuseImperativeHandleを使う

詳細

Componentを継承したコンポーネントを定義した場合はrefを渡してメソッドを実行できる。
React hooksを使ってるとFunctionComponentになるのでコンポーネントにメソッドというものがない。
forwardRef と useImperativeHandle を使う。

サンプル

import React, { useImperativeHandle, forwardRef, useRef } from "react";
import { render } from "react-dom";

interface ChildProps {
  text: string;
}
const ChildBase: React.RefForwardingComponent<any, ChildProps> = (
  { text },
  ref
) => {
  const test = () => {
    window.alert(text);
  };
  useImperativeHandle(ref, () => ({
    test
  }));

  return <span>{text}</span>;
};
const Child = forwardRef(ChildBase);

const Parent: React.FC = () => {
  const ref = useRef<any>();
  const handleClick = () => {
    ref.current && ref.current.test();
  };
  return (
    <div>
      <button onClick={handleClick}>Exec</button>
      <Child ref={ref} text="Hello" />
    </div>
  );
};

render(<Parent />, document.getElementById("root"));

anyのところはどうするのがいいのかわかってない。