REHRIZEOBSERVER gibt immer den gleichen Inhalt zurück ⇐ CSS

[Anonymous]

Ich versuche, auf meiner Seite ein PDF mit "React-PDF" zu zeigen. Ich habe jetzt Probleme damit, es reaktionsschnell zu machen. Ich benutze jetzt diesen benutzerdefinierten Hook, um die Größe des InhaltsRect zu erhalten: < /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>
Dies ist mein pdfViewer.tsx, der auf der Seite verwendet wird.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>
Wie Sie vielleicht bemerken, habe ich ein Textelement hinzugefügt, um die Breite zu drucken. Es ändert sich jedoch nie. Auch wenn ich das Browserfenster ständig ändern. Kann mir jemand sagen, was hier schief gelaufen ist?
Danke.