使用 react-cool-inview 类型错误（'RefObject<HTMLElement>' 不可分配给类型 'RefObject<HTMLDivElement>'）

Question

我使用 yarn add react-cool-inview 安装了 react-cool-inview。

然后我导入它并在一个组件上使用它(MyComponent.tsx):

import React from "react";
import useInView from "react-cool-inview";

const MyComponent = (): JSX.Element => {
  interface onEnterArgs {
    unobserve: () => void;
  }

  const { ref } = useInView({
    onEnter: ({ unobserve }: onEnterArgs) => {
      unobserve();
      console.log("Got it");
    },
  });

  return (
    <div ref={ref}> // lint error on this line
      Hi there
    </div>
  );
};

export default MyComponent;

当运行我的 TypeScript 应用程序时，我收到以下类型构建错误：

Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.  TS2322

可能是什么原因造成的？

Answer 1

useInView 是 return 对一般 HTMLElement 的引用，但是 div 想要一个专门针对 div 的引用，又名 HTMLDivElement.

幸运的是，useInView 函数接受一个通用变量，您可以使用它来设置元素的类型。

const { ref } = useInView<HTMLDivElement>({ ...

这将 return ref 的正确类型 div。

使用 react-cool-inview 类型错误（'RefObject<HTMLElement>' 不可分配给类型 'RefObject<HTMLDivElement>'）

Type error using react-cool-inview ('RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>')

viewport

typescript

reactjs