React和turn.js（转不是函数）

Posted 2023-01-13

我想用反应运行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对象。尝试在webpack配置中使用ProvidePlugin，以便jQuery暴露给turn.js.也许是这样的：

new webpack.ProvidePlugin(
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    $: 'jquery'
)