ResizeObserver всегда возвращает один и тот же контент ⇐ CSS

[Anonymous]

Я пытаюсь показать PDF на своей странице, используя «React-PDF». Сейчас я борюсь за то, чтобы сделать это отзывчивым. Сейчас я использую этот пользовательский крючок, чтобы получить размер ContentRect: < /p>
import { useEffect, useState, useCallback } from "react";

interface Size {
width: number;
height: number;
}

const useResizeObserver = (targetRef: HTMLElement | null): Size => {
const [size, setSize] = useState({ width: 0, height: 0 });

const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
const [entry] = entries;
if (entry) {
setSize({
width: entry.contentRect.width,
height: entry.contentRect.height,
});
}
}, []);

useEffect(() => {
if (!targetRef) return;

const resizeObserver = new ResizeObserver(handleResize);
resizeObserver.observe(targetRef);

return () => {
resizeObserver.disconnect();
};
}, [targetRef, handleResize]);

return size;
};

export default useResizeObserver;
< /code>
Это мой pdfviewer.tsx, который используется в page.tsx: < /p>
"use client";

import React, { useRef, useState } from "react";
import { Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import { pdfjs } from "react-pdf";
import "react-pdf/dist/Page/TextLayer.css";
import type { PDFDocumentProxy } from 'pdfjs-dist';
import useResizeObserver from "@/hooks/useResizeObserver";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/build/pdf.worker.min.mjs",
import.meta.url
).toString();

const PDFViewer: React.FC = () => {
const [numPages, setNumPages] = useState(0);
const [pageNumber, setPageNumber] = useState(1);
const containerRef = useRef(null);

const { width: pdfWidth, height: pdfHeight } = useResizeObserver(containerRef.current);

const pdfUrl = "/docs/menu.pdf";

function onDocumentLoadSuccess({ numPages: nextNumPages }: PDFDocumentProxy): void {
setNumPages(nextNumPages);
}

return (


{" < "}

Menu
Page {pageNumber} of {numPages}
Width: {pdfWidth}




{" > "}


);
};

export default PDFViewer;
< /code>
Как вы можете заметить, я добавил текстовый элемент для печати ширины. Тем не менее, это никогда не меняется. Даже когда я постоянно изменяю размер окна браузера. Кто -нибудь может сказать мне, что здесь пошло не так?
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ontentrect