Javascript 缩放/缩放按钮不'；我不能使用react pdf

我试着为我的pdf查看器编写放大和缩小按钮的代码，但它不起作用。在每个函数中，我增加或减少初始比例，但什么也没有发生。我的函数在单击时被很好地调用。有人来帮我或告诉我我做错了什么吗

以下是我的查看器代码：

import { Document, Page, pdfjs } from 'react-pdf';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight, faChevronLeft, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import './PdfViewer.scss';

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
// Small screens width detection
const MOBILE_WIDTH = 768;

export default class App extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
    scale: 1,
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  // Adapt the size of the scale according to the screen
  resize = () => {
    if (window.innerWidth <= MOBILE_WIDTH) {
      this.setState({ scale: 0.75 });
    }
  }

  zoomIn = () => {
    this.setState({
      scale: this.state.scale + 0.2,
    });
  };

  zoomOut = () => {
    this.setState({
      scale: this.state.scale - 0.2,
    });
  };

  goToPrevPage = () => this.setState(state => ({ pageNumber: state.pageNumber - 1 }));

  goToNextPage = () => this.setState(state => ({ pageNumber: state.pageNumber + 1 }));

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div className="pdfviewer">
        <Document
          file="https://test.s3.amazonaws.com/20200202.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page
            pageNumber={pageNumber}
            renderTextLayer={false}
          >
            <div className="pdfviewer__controls">
              <button id="button-left" onClick={this.goToPrevPage} disabled={pageNumber <= 1}><FontAwesomeIcon icon={faChevronLeft} /></button>
              <button id="zoomInButton" onClick={this.zoomIn}><FontAwesomeIcon icon={faPlus} /></button>
              <span>page {pageNumber}/{numPages || '--'}</span>
              <button id="zoomOutButton" onClick={this.zoomOut}><FontAwesomeIcon icon={faMinus} /></button>
              <button id="button-right" onClick={this.goToNextPage} disabled={pageNumber >= numPages}><FontAwesomcreIcon icon={faChevronRight} /></button>
            </div>
          </Page>
        </Document>
      </div>
    );
  }
}

从'react pdf'导入{Document，Page，pdfjs}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free solid svg icons”导入{faChevronRight、faChevronLeft、faMinus、faPlus}；
导入“/PdfViewer.scss”；
pdfjs.GlobalWorkerOptions.workerSrc=`https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`；
//小屏幕宽度检测
常量移动宽度=768；
导出默认类应用程序扩展组件{
状态={
numPages:null，
页码：1，
比例：1，
};
componentDidMount（）{
window.addEventListener（'resize'，this.resize）；
这是resize（）；
}
组件将卸载（）{
window.removeEventListener（'resize'，this.resize）；
}
onDocumentLoadSuccess=（{numPages}）=>{
this.setState（{numPages}）；
};
//根据屏幕调整刻度的大小
调整大小=（）=>{
如果（window.innerWidth{
这是我的国家({
比例：this.state.scale+0.2，
});
};
zoomOut=（）=>{
这是我的国家({
比例：this.state.scale-0.2，
});
};
goToPrevPage=（）=>this.setState（state=>（{pageNumber:state.pageNumber-1}））；
goToNextPage=（）=>this.setState（state=>（{pageNumber:state.pageNumber+1}））；
render（）{
const{pageNumber，numPages}=this.state；
返回(
);
}
}

您需要缩放页面组件：

<Page
  pageNumber={pageNumber}
  renderTextLayer={false}
  scale={scale}
>