reactjs - 使用 React.useImperativeHandle() 声明类型

Question

function App(){
  const cntEl:any = React.useRef(null);  // I don't know what type should be here.
  React.useEffect(()=>{
    if(cntEl.current){ cuntEl.current.start() }
  }, []);
  return <Countdown ref={cntEl} />
}
const Countdown = React.forwardRef((props,ref) => {
  React.useImperativeHandle(ref, ()=>({
    start() {
      alert('Start');
    }
  });
  return <div>Countdown</div>
});

我尝试使用 ref 在父组件中使用子方法和 React.useImperativeHandle() .

它运作良好。

但我不满意，因为 const cntEl:any .

我相信有很多方法可以避免使用 any类型我不知道。

我只需要一个可以替换的类型 any .

已编辑

我可以看到 (property) React.MutableRefObject<null>.current: null当我悬停在 cntEl.current

Answer 1

我建议您更明确地使用类型定义
例如，使用 React DT，您可以使用 ForwardRefRenderFunction 定义 ref 外来组件而不是 FC .

type CountdownProps = {}
    
type CountdownHandle = {
  start: () => void,
}
    
const Countdown: React.ForwardRefRenderFunction<CountdownHandle, CountdownProps> = (
  props,
  forwardedRef,
) => {
  React.useImperativeHandle(forwardedRef, ()=>({
    start() {
      alert('Start');
    }
  });

  return <div>Countdown</div>;
}

export default React.forwardRef(Countdown);

然后使用 React 实用程序 ElementRef , TypeScript 可以推断出组件的确切引用类型

const App: React.FC = () => {
  // this will be inferred as `CountdownHandle`
  type CountdownHandle = React.ElementRef<typeof Countdown>;

  const ref = React.useRef<CountdownHandle>(null); // assign null makes it compatible with elements.

  return (
    <Countdown ref={ref} />
  );
};