'ResizeObserver' 仅指一种类型，但在此处用作值

IT技术 reactjs typescript
2021-05-22 16:06:33

我收到错误：'ResizeObserver' only refers to a type, but is being used as a value here当尝试在 React 中使用 TypeScript 时使用 ResizeObserver。

我将以下接口定义为 TypeScript 不包含定义：

interface ResizeObserver {
    observe(target: Element): void;
    unobserve(target: Element): void;
    disconnect(): void;
}

我在以下组件中使用它：

const useWidth = () => {

    const ref = useRef<HTMLObjectElement>(null);

    const [width, setWidth] = useState(0);

    useLayoutEffect(() => {

        var resizeObserver = new ResizeObserver(() => console.log("blah blah blah"))
        resizeObserver.observe(ref.current)

        return () => resizeObserver.disconnect()

    }, [ref.current])

    return [ref, width];
}
1个回答

您应该安装@types/resize-observer-browsernpm 包，以获取类型声明。如果你真的想推出自己的，你可以通过文件declare var中的 a定义一个新的接口*.d.ts。

declare interface ResizeObserver {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
}

declare var ResizeObserver: {
  prototype: ResizeObserver;
  new(callback: ResizeObserverCallback): ResizeObserver;
};

interface ResizeObserverSize {
    inlineSize: number;
    blockSize: number;
}

type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;

interface ResizeObserverEntry {
    readonly target: Element;
    readonly contentRect: DOMRectReadOnly;
    readonly borderBoxSize: ResizeObserverSize;
    readonly contentBoxSize: ResizeObserverSize;
}

然后它将在全球范围内可用（因为我相信它在浏览器中）并且您可以对其进行更新：

在此处输入图片说明

其它你可能感兴趣的问题
上一篇使用钩子设置具有相同值的状态会导致重新渲染吗？ 下一篇速度react - 在组件更新后动画滚动顶部