javascript - Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef&l

admin管理员组

文章数量:1355264

I have set up a custom hook which gets a ref object and observes it:

import { useState, useEffect, MutableRefObject } from "react";

const UseOnScreen = (ref: MutableRefObject<undefined>) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
  });
  return isIntersecting;
};
export default UseOnScreen;

Next, in my page ponent, I have declared a ref using useRef():

import { useRef } from "react";
import UseOnScreen from "../hooks/UseOnScreen";
import About from "./about";

export default function Home() {
  const aboutRef = useRef();
  const aboutRefValue = UseOnScreen(aboutRef);

  return (
     <>
         {/* other ponents */}
         <div ref={aboutRef}>{aboutRefValue && <About />}</div>
     </>
  );
}

This gives the following error:

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are inpatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
index.d.ts(138, 9): The expected type es from property 'ref', which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

The strange fact about this error is, though this gives an error in my editor, the code still works as expected. I tried setting the type of ref object to LegacyRef<HTMLDivElement> | undefined, but the error still persists.

I would like to get rid of this error in my editor.

I have set up a custom hook which gets a ref object and observes it:

import { useState, useEffect, MutableRefObject } from "react";

const UseOnScreen = (ref: MutableRefObject<undefined>) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
  });
  return isIntersecting;
};
export default UseOnScreen;

Next, in my page ponent, I have declared a ref using useRef():

import { useRef } from "react";
import UseOnScreen from "../hooks/UseOnScreen";
import About from "./about";

export default function Home() {
  const aboutRef = useRef();
  const aboutRefValue = UseOnScreen(aboutRef);

  return (
     <>
         {/* other ponents */}
         <div ref={aboutRef}>{aboutRefValue && <About />}</div>
     </>
  );
}

This gives the following error:

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are inpatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
index.d.ts(138, 9): The expected type es from property 'ref', which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

The strange fact about this error is, though this gives an error in my editor, the code still works as expected. I tried setting the type of ref object to LegacyRef<HTMLDivElement> | undefined, but the error still persists.

I would like to get rid of this error in my editor.

• javascript
• reactjs
• typescript
• next.js

Share Improve this question Follow edited Mar 19, 2023 at 16:13 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked Jan 3, 2023 at 4:58 Shourya ShikharShourya Shikhar 1,52411 gold badge1818 silver badges3232 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

With MutableRefObject<undefined>, you are saying I want the ref of undefined; that's the problem. Change it to MutableRefObject<HTMLDivElement | null> and also update your useRef call, like so:

const useOnScreen = (ref: MutableRefObject<HTMLDivElement | null>) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
  });
  return intersecting;
};
export default useOnScreen;

export default function Home() {
  const aboutRef = useRef<HTMLDivElement | null>(null);
  const aboutRefValue = useOnScreen(aboutRef);

  return (
    <>
      {/* other ponents */}
      <div ref={aboutRef}>
        {aboutRefValue && <div>Your about was here</div>}
      </div>
    </>
  );
}

本文标签：