React - useRef 与 TypeScript 和功能组件

Posted 2023-02-21

【中文标题】React - useRef 与 TypeScript 和功能组件

【英文标题】：React - useRef with TypeScript and functional component

【发布时间】：2020-06-18 15:25:29

【问题描述】：

我试图从父组件调用子组件方法，并且试图使用 useRef。未来，SayHi 方法将在子组件中更新钩子状态。不幸的是，我有一些我无法处理的错误。

行：ref.current.SayHi();

'ForwardRefExoticComponent void; >>'。

行：

类型'RefObject void; >>>' 不能分配给类型 '((instance: SayHi: () => void; | null) => void) | RefObject void; > |空 |不明确的'。 类型 'RefObject 无效； >>>' 不能分配给类型 'RefObject void; >'。 'ForwardRefExoticComponent 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>;
);

我在这个话题上深深地寻求帮助。

【参考方案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>
    );

【讨论】：

非常感谢！ :)

【参考方案2】：

只需将 ref 的声明替换为 const ref = useRef< SayHi: () => void >(null);