Реагировать на попытки вызвать дочернюю (useRef) функцию в функциональном компоненте

Question

У меня есть подкомпонент, который генерирует и отображает случайное число.
Я пытаюсь управлять им от родителя.
, но значение ref равно нулю.

Как я могу вызвать дочернюю функцию от родителя в функциональном компоненте
https://codesandbox.io/s/busy-joliot-85yom

function App() {
  const child = useRef();
  const generate = () => child.current.generate();

  return (
    <div className="App">
    <br />
      <Child ref={child}></Child><br />
      <button onClick={generate}>regenerate from parent (Not working)</button>
    </div>
  );
}

function Child(props){
  const [number, setNumber] = useState(0);
  const generate = () => setNumber(Math.round(Math.random() * 10));
  return <div>{number} <br /> <button onClick={generate}>regenerate from child</button></div>;
}

Спасибо

Answer 1

Вы не можете использовать свойство ref в функциональном компоненте, но вы можете обрабатывать любой объект ref самостоятельно, только не называйте его «ref», реагировать не нравится. Проверьте мой пример