时间戳

首页 > 解决方案 > 使用 react-cool-inview ('RefObject' 不可分配给类型 'RefObject')

reactjs - 使用 react-cool-inview ('RefObject' 不可分配给类型 'RefObject')

问题描述

我已经react-cool-inview使用yarn add 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

这可能是什么原因造成的？

标签： reactjstypescriptviewport

解决方案

useInView正在返回一个一般的参考HTMLElement，但div想要一个专门用于 div aka 的参考HTMLDivElement。

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

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

这将为refa返回正确的类型div。

推荐阅读