[英]React and turn.js (turn is not a function)
我想用react运行turn.js。 我在这里找到了一个例子: https : //codesandbox.io/s/005xlk45mn
我将代码修改为我的项目,但出现以下错误:TypeError:jquery__WEBPACK_IMPORTED_MODULE_6 ___ default(...)(...)。turn不是函数
import React, { Component } from 'react';
import $ from "jquery";
import "turn.js";
const options = {
width: 800,
height: 600,
autoCenter: true,
display: "double",
acceleration: true,
elevation: 50,
gradients: !$.isTouch,
when: {
turned: function(e, page) {
console.log("Current view: ", $(this).turn("view"));
}
}
};
class xxx extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
$("#flipbook").turn(options);
}
render() {
return (
<div id="flipbook">
<div className="hard">Turn.js</div>
<div className="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div className="hard"></div>
<div className="hard"></div>
</div>
);
}
}
export default Condolences;
这也没有工作:
import * as $ from "jquery"
componentDidMount() {
$(this.el).turn();
}
render() {
return (
<div id="flipbook" ref={ el => this.el = el }>
<div className="hard">Turn.js</div>
<div className="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div className="hard"></div>
<div className="hard"></div>
</div>
);
}
看起来turn.js插件未附加到jQuery实例。 这可能与您的Webpack设置有关。 如您所述,该代码在codesandbox中工作正常。
为了将自身安装为jQuery插件,turn.js需要修改全局jQuery对象。 尝试使用ProvidePlugin让jQuery的暴露turn.js.在你的WebPack配置 也许是这样的:
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
$: 'jquery'
})
我遇到了同样的问题...我解决了使用较低版本的jQuery的问题,例如npm
描述
最新版本使用jQuery 1.12.0,因为jQuery 3.x破坏了页面挡板。
使用JQuery版本1.12.0
,它可以正常工作
我什至使用React 16.10.x进行了演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.