TypeError _this2.flipBook.getPageFlip 不是一个函数

Question

我曾经在 Reactjs 上使用过，react-pageflip就像下面的代码一样，它运行得很好。当我复制相同的组件时，我在 nextjs 项目中收到此错误。

错误：

TypeError: _this2.flipBook.getPageFlip is not a function

代码：

import HTMLFlipBook from "react-pageflip";

class Book extends Component {
...

 onFlip(data) {
         this.setState({ page : data});
     }
  nextButtonClick = () => {
         this.flipBook.getPageFlip().flipNext();
       };
     
   prevButtonClick = () => {
         this.flipBook.getPageFlip().flipPrev();
       };

rendr(){

return(


<HTMLFlipBook  maxShadowOpacity={1} mobileScrollSupport={true} 
              className="demo-book"
              drawShadow={true}
              onFlip={(e) => this.onFlip(e.data)}
              changeOrientation="portrait"
              ref={(el) => (this.flipBook = el)}
 > 
 
<div classname={page1}>
  page1
</div>
<div classname={page2}>
  page2
</div>
</HTMLFlipBook>


)
}

Answer 1

this.flipBook.getPageFlip().flipNext(); 在 nextButtonClick 和 prevButtonClick 函数内的块中，您应该通过翻转使用 this.flipBook.pageFlip().flipNext() 。它对我有用，我希望它对你也有用。

    nextButtonClick = () => {
    this.flipBook.pageFlip().flipNext()
  };



prevButtonClick = () => {
    this.flipBook.pageFlip().flipPrev();
  };