Как включить стороннюю библиотеку (turn.js) в реакцию? - PullRequest
Новая
       74

Как включить стороннюю библиотеку (turn.js) в реакцию?

0 голосов
/ 14 ноября 2018

Прямо сейчас мне нужно сделать анимацию переворачивания страницы в реакции. Я видел библиотеку turn.js, которая используется для перелистывания страниц. Я импортировал это в компоненте реакции. В этой библиотеке не вызывается функция Jquery (.turn)

Заявление об импорте 

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

Oncomponent сделал метод монтирования: 

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>

Ошибка в консоли браузера:

1014 * 

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

1 Ответ

0 голосов
/ 23 декабря 2018

Почему бы вам не использовать реагирующую страницу. Это хорошо и отзывчиво.

Установите его, используя 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>

Вот ссылка на ссылку

...