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

我遇到了同样的问题...我使用较低版本的 jQuery 解决了问题，如 npm 描述中所说的

最新版本使用 jQuery 1.12.0，因为 jQuery 3.x 打破了 翻页器。

使用 JQuery 版本 1.12.0 就可以了

我什至使用 React 16.10.x 制作了 demo

Answer 2

看起来 turn.js 插件没有附加到您的 jQuery 实例。这可能与您的 webpack 设置有关。正如您所指出的，代码在代码框中运行良好。

为了将自己安装为 jQuery 插件，turn.js 需要修改一个全局 jQuery 对象。尝试在你的 webpack 配置中使用ProvidePlugin，这样 jQuery 就会暴露给 turn.js。也许是这样的：

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