useRef Typescript 错误：“HTMLElement”类型上不存在属性“当前”

Posted 2023-03-13

【中文标题】useRef Typescript 错误：“HTMLElement”类型上不存在属性“当前”

【英文标题】：useRef Typescript error: Property 'current' does not exist on type 'HTMLElement'

【发布时间】：2021-02-06 23:59:38

【问题描述】：

我正在使用 React 和 Typescript 制作一个 Datepicker，但我似乎无法克服 useRef 和 ref 的 .current 属性的错误。我正在尝试获取div，当在文档之外单击文档时，我将引用分配给关闭。

我似乎无法弄清楚我做错了什么。这是我的代码：

function Datepicker(label, placeholder: DatepickerProps)
  const [open, setOpen] = React.useState(false)
  const [day, setDay] = React.useState(0)
  const [month, setMonth] = React.useState(new Date().getMonth())
  const [year, setYear] = React.useState(new Date().getFullYear())
  const picker = React.useRef(null) as htmlElement | null

  React.useEffect(() => 
    document.addEventListener("mousedown", toggle)
    return () => 
      document.removeEventListener("mousedown", toggle)
    ;
  , []);

  const toggle = (e: MouseEvent) => 
    if (picker && picker.current)
      if (picker.current.contains(e.target) === false)
        setOpen(false)
      
    
  

  //...

  return(
    
    //...

    <div 
      ref=picker
      className="datepicker-picker" + (open ? " open" : "")
    >

      //...

  )

React.useRef(null) as HTMLElement | null 给我以下问题：

Conversion of type 'MutableRefObject<null>' to type 'HTMLElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'MutableRefObject<null>' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more.ts(2352)

.current 给了我以下信息：

Property 'current' does not exist on type 'HTMLElement'.

当我尝试将 ref 应用于 div 元素时，它会显示以下内容：

Type 'HTMLElement | null' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'HTMLElement' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
    Type 'HTMLElement' is not assignable to type 'string'.ts(2322)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

我正在使用 VSCode 作为我的 IDE，如果这有帮助的话。

【参考方案1】：

useRef 不返回 ref 中的值 - 将返回值键入为 HTMLElement | null 是不准确的。改用通用参数：

const picker = React.useRef<HTMLElement>(null);

您还需要更改 toggle 以便根据需要缩小类型：

const toggle = (e: MouseEvent) => 
  const  current  = picker;
  if (current && !current.contains(e.target)) 
    setOpen(false);
  

【讨论】：

这有助于解决第一个错误和最后一个错误！ （我改用HTMLDivElement）现在它给了我这个错误：Argument of type 'EventTarget | null' is not assignable to parameter of type 'Node | null'. 另外，我的文件是 .tsx，我可以使用useRef<HTMLElement> 的形式进行类型断言吗？

听起来你需要断言事件目标是一个节点：e.target as Node。 我是否允许以的形式进行类型断言，当然，虽然这不是类型 assertion，但这是传递给 useRef 的类型 parameter .这样的类型参数就好了。