React PDF 查看器组件不断重新渲染

使用React PDF查看器组件可以实现在网页上展示PDF文件的功能。这个组件的特点是能够实时渲染PDF文件的内容，当用户进行缩放、旋转、翻页等操作时，组件会自动重新渲染PDF文件，以实现流畅的查看体验。

npm install react-pdf
或
yarn add react-pdf

import { Document, Page } from 'react-pdf';

class PDFViewer extends React.Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }
  
  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  }
  
  render() {
    const { pageNumber, numPages } = this.state;
    
    return (
      
                  file="path/to/your/pdf/file.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          
        
        
Page {pageNumber} of {numPages}
      
    );
  }
}

class PDFViewer extends React.Component {
  ...
  
  goToNextPage = () => {
    const { pageNumber, numPages } = this.state;
    
    if (pageNumber < numPages) {
      this.setState({ pageNumber: pageNumber + 1 });
    }
  }
  
  render() {
    ...
    
    return (
      
                  ...
        >
          
        
        
Page {pageNumber} of {numPages}
        Next Page
      
    );
  }
}