React - useRef с TypeScript и функциональным компонентом

Question

Я пытался вызвать метод дочернего компонента из родительского компонента, и я пытался использовать useRef. В будущем метод SayHi будет обновлять состояние подключения в дочернем компоненте. К сожалению, у меня есть ошибки, с которыми я не могу справиться.

Строка: ref.current.SayHi ();

Свойство 'SayHi' не существует для типа 'ForwardRefExoticComponent <{name: string; } & RefAttributes <{SayHi: () => void; } >> '.

Строка: <Имя ребенка = "Адам" ref = {ref} />

Тип' RefObject void; } >>> 'нельзя назначить типу' ((экземпляр: {SayHi: () => void;} | null) => void) | RefObject <{SayHi: () => void; }> | ноль | не определено. Тип 'RefObject void; } >>> 'нельзя присвоить типу' RefObject <{SayHi: () => void; }>». Свойство 'SayHi' отсутствует в типе 'ForwardRefExoticComponent <{name: string; } & RefAttributes <{SayHi: () => void; } >> 'но требуется в типе' {SayHi: () => void; } '.

Полный файл test.tsx:

import React, { useRef, forwardRef, useImperativeHandle, Ref } from 'react'

const Parent = () => {
    const ref = useRef<typeof Child>(null);
    const onButtonClick = () => {
      if (ref.current) {
        ref.current.SayHi();
      }
    };
    return (
      <div>
        <Child name="Adam" ref={ref}/>
        <button onClick={onButtonClick}>Log console</button>
      </div>
    );
  }

const Child = forwardRef((props: {name: string}, ref: Ref<{SayHi: () => void}>)=> {
  const {name} = props;
  useImperativeHandle(ref, () => ({ SayHi }));

  function SayHi() { console.log("Hello " + name); }

  return <div>{name}</div>;
});

Я очень прошу помощи по этой теме c.

Answer 1

Вам необходимо извлечь тип ссылки в другом месте:

interface RefObject {
  SayHi: () => void
}

, а затем просто обратиться к нему в обоих местах

const Child = forwardRef((props: {name: string}, ref: Ref<RefObject>)=> {
  const {name} = props;  
  useImperativeHandle(ref, () => ({ SayHi }));
  function SayHi() { console.log("Hello " + name); }

  return <div>{name}</div>;
});

const Parent = () => {
    const ref = useRef<RefObject>(null);
    const onButtonClick = () => {
      if (ref.current) {
        ref.current.SayHi();
      }
    };
    return (
      <div>
        <Child name="Adam" ref={ref}/>
        <button onClick={onButtonClick}>Log console</button>
      </div>
    );
}

Answer 2

Просто замените декларацию вашего ref на const ref = useRef<{ SayHi: () => void }>(null);