reactjs - 在带有 typescript 的函数组件中使用 useImperativeHandle，它会提示一些错误；

Question

类型'{焦点（）：无效；}' 缺少类型“HTMLDivElement”的以下属性：align、addEventListener、removeEventListener、accessKey 和 234 more.ts(2740) index.d.ts(1041, 79)：预期类型来自 this 的返回类型签名。

这是组件代码：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = HTMLDivElement | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current.focus();
      }
    }));
    return (
      <div ref={ref}>
        {children}
        <input type="text" ref={inputRef} />
      </div>
    );
  }
);

export default Swiper;

完整代码在代码沙箱中；

https://codesandbox.io/s/useimperativehandlecomponenterror-lowon

标签： reactjstypescriptreact-hooks

Answer 1

您混淆了您的 refs 的类型定义：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = {
  focus: () => void
} | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current?.focus();
      }
    }));
    return (
      <div>
        {children}
        <input type="text" ref={inputRef} />
      </div>
    );
  }
);

export default Swiper;

您公开的类型应该描述您的命令句柄。