javascript - useRef Typescript error: Property 'current' does not exist on type 'HTMLElement' -

admin管理员组

文章数量:1199535

I'm making a Datepicker with React and Typescript, and I can't seem to get over the errors with useRef and the ref's .current property. I'm trying to get the div I'm assigning the ref to to close when the document is clicked outside of it.

I just can't quite seem to figure out what I'm doing wrong. Here is my code:

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 is giving me the following problem:

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 is giving me the following:

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

and when I try to apply the ref to a div element, its says the following:

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>'

I'm using VSCode as my IDE, if that helps at all.

I'm making a Datepicker with React and Typescript, and I can't seem to get over the errors with useRef and the ref's .current property. I'm trying to get the div I'm assigning the ref to to close when the document is clicked outside of it.

I just can't quite seem to figure out what I'm doing wrong. Here is my code:

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 is giving me the following problem:

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 is giving me the following:

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

and when I try to apply the ref to a div element, its says the following:

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>'

I'm using VSCode as my IDE, if that helps at all.

• javascript
• reactjs
• typescript
• visual-studio-code
• react-hooks

Share Improve this question Follow asked Oct 23, 2020 at 22:44 JordanJordan 95011 gold badge1212 silver badges2727 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22

useRef does not return the value in the ref - asserting the type of the return value as HTMLElement | null is inaccurate. Use a generic type argument instead:

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

You'll also need to change toggle so that the type narrowing occurs as desired:

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

本文标签：