React和turn.js（turn不是函數）

Question

我想用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>
        );
    }

Answer 1

看起來turn.js插件未附加到jQuery實例。 這可能與您的Webpack設置有關。 如您所述，該代碼在codesandbox中工作正常。

為了將自身安裝為jQuery插件，turn.js需要修改全局jQuery對象。 嘗試使用ProvidePlugin讓jQuery的暴露turn.js.在你的WebPack配置 也許是這樣的：

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

Answer 2

我遇到了同樣的問題...我解決了使用較低版本的jQuery的問題，例如npm描述

最新版本使用jQuery 1.12.0，因為jQuery 3.x破壞了頁面擋板。

使用JQuery版本1.12.0 ，它可以正常工作

我什至使用React 16.10.x進行了演示