React - useRef 與 TypeScript 和功能組件

Question

我試圖從父組件調用子組件方法，我試圖使用 useRef。 將來，SayHi 方法將更新子組件中的鈎子狀​​態。 不幸的是，我有無法處理的錯誤。

行： ref.current.SayHi();

類型“ForwardRefExoticComponent<{ name: string;”上不存在屬性“SayHi” } & RefAttributes<{ SayHi: () => void; }>>'。

行： < Child name="Adam" ref={ref}/>

輸入'RefObject void; }>>>' 不能分配給類型 '((instance: { SayHi: () => void; } | null) => void) | RefObject<{ SayHi: () => void; }> | 空| 不明確的'。 輸入'RefObject void; }>>>' 不能分配給類型 'RefObject<{ SayHi: () => void; }>'。 “ForwardRefExoticComponent<{ name: string;”類型中缺少“SayHi”屬性 } & 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>;
});

我深切地尋求有關此主題的幫助。

Answer 1

您需要在別處提取 ref 類型：

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

只需用這個const ref = useRef<{ SayHi: () => void }>(null);替換你的ref的聲明const ref = useRef<{ SayHi: () => void }>(null);