javascript - 我如何在反应中包含第三方库（turn.js）

Question

现在，我需要在 react 中做翻页动画。我看到了用于翻页的 turn.js 库。我在反应组件中导入了它。它没有调用该库中的 Jquery 函数（.turn）

进口声明

 import React from 'react';
import $ from 'jquery'
import 'turn.js/index.js'

Oncomponent 做了 mount 方法：

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>

浏览器控制台中的错误：

</p>

Turn.js?36f0:16 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).turn is not a function

标签： javascriptreactjswebpackpage-flippingturn.js

Answer 1

为什么不使用 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>

这是参考链接