Question

我是新来的反应者，我想建立一个可以显示pdf的网站。

我已经通过“ npm install react-pdf”下载了pdf查看器，并基于简单的示例https://www.npmjs.com/package/react-pdf，编写了以下代码。

(import stuff)

class pdfViewer extends Component {
   pdfView = () => {
        const [numPages, setNumPages] = useState(null);
        const [pageNumber, setPageNumber] = useState(1);

        return (
            <div>
                <Document
                    file={eggPdf}
                    onLoadSuccess={({ numPages }) => {
                        setNumPages(numPages);
                    }}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
       }

  render(){
        const pdfViwer = this.pdfView();
        return(
        <div>
           {pdfViwer}
        </div>
        );

}

(export)

它显示错误：错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：...

我应该如何修改呢？

提前谢谢！

Answer 1

您应该使用函数或类组件。如果要使用挂钩，则需要使用如下功能组件：

(import stuff)

  const PdfView = () => {
        const [numPages, setNumPages] = useState(null);
        const [pageNumber, setPageNumber] = useState(1);

        return (
            <div>
                <Document
                    file={eggPdf}
                    onLoadSuccess={({ numPages }) => {
                        setNumPages(numPages);
                    }}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
       }

export default PdfView;

现在，您可以在应用程序中的任何位置使用此组件。

反应挂钩：在渲染方法中使用（错误：无效的挂钩调用）

1 个答案: