[英]How do i include the third parties Library (turn.js) in react
现在,我需要在react中做页面翻转动画。 我看到了用于页面翻转的turn.js库。 我将其导入了react组件中。 它没有在该库中调用Jquery函数(.turn)
进口声明
import React from 'react';
import $ from 'jquery'
import 'turn.js/index.js'
Oncomponent做了挂载方法:
componentDidMount(){
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
}
在渲染上:
<div>
<div ref="flipbook">
<div className="hard"> Turn.js </div>
<div className="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div className="hard"></div>
<div className="hard"></div>
</div>
</div>
浏览器控制台中的错误:
Turn.js?36f0:16 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).turn is not a function
为什么不使用react-flip-page。 它的好,也反应迅速。
使用npm安装它:
npm install --save react-flip-page
然后,您可以将FlipPage
用作组件。 像这样:
<FlipPage>
<article>
<h1>My awesome first article</h1>
<p>My awesome first content</p>
</article>
<article>
<h1>My wonderful second article</h1>
<p>My wonderful second content</p>
</article>
<article>
<h1>My excellent third article</h1>
<p>My excellent third content</p>
</article>
</FlipPage>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.