输入'MutableRefObject<undefined> ' 不可分配给类型 'LegacyRef<htmldivelement> | 不明确的'</htmldivelement></undefined>

Question

我已经设置了一个自定义挂钩，它获取一个ref object 并观察它：

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;

接下来，在我的页面组件中，我使用useRef()声明了一个ref ：

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 components */}
         <div ref={aboutRef}>{aboutRefValue && <About />}</div>
     </>
  );
}

这给出了以下错误：

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 incompatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
index.d.ts(138, 9): The expected type comes from property 'ref', which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

关于这个错误的奇怪事实是，虽然这在我的编辑器中给出了一个错误，但代码仍然按预期工作。 我尝试将 ref object 的类型设置为LegacyRef<HTMLDivElement> | undefined LegacyRef<HTMLDivElement> | undefined ，但错误仍然存在。

我想在我的编辑器中消除这个错误。

Answer 1

使用MutableRefObject<undefined> ，你是说我想要undefined的引用； 那就是问题所在。 将其更改为MutableRefObject<HTMLDivElement | null> MutableRefObject<HTMLDivElement | null>并更新您的useRef调用，如下所示：

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 components */}
      <div ref={aboutRef}>
        {aboutRefValue && <div>Your about was here</div>}
      </div>
    </>
  );
}