Импорт функции Jquery в React - PullRequest
Новая
       10

Импорт функции Jquery в React

3 голосов
/ 23 февраля 2020

У меня есть эта функция смахивания, которую я создал с помощью смахивания js .org / html, которая изначально была предназначена для кого-то другого, но я использую ее в своем собственном проекте.

Сначала я сделал работающую версию того, что я хочу сделать в HTML & Jquery, которая находится здесь на jsfiddle: https://jsfiddle.net/sbfield/nojhqbtx/1/

После этого, Для этого я создал компонент реагирования: 

import React from 'react'


export default function CompareBox() {

  var element = document.getElementById('mySwipe');


  window.mySwipe = new Swipe(element, {
    startSlide: 0,
    draggable: true,
    autoRestart: false,
    continuous: false,
    disableScroll: true,
    stopPropagation: true,
    callback: function (index, element) { },
    transitionEnd: function (index, element) { }
  });


  return (
    <>
      <div id="myContainer">
        <div id="mySwipe" class="swipe">
          <div className="swipe-wrap">
            <div>
              <div className="red">
              </div></div>
            <div><div className="grey"></div></div>
          </div>
        </div>
      </div>
    </>
  )
}

Я добавил CDN для считывания js в свой индекс React. html Файл: 

  <script crossorigin src="https://cdn.jsdelivr.net/gh/lyfeyaj/swipe/swipe.js"></script>
  <script crossorigin src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Однако это не работает в моем проекте React

Ошибка: 

./src/components/CompareBox.jsx
  Line 9:24:  'Swipe' is not defined  no-undef

Я установил swipe js как npm пакет https://www.npmjs.com/package/swipejs, но когда я пытаюсь использовать import { Swipe } from 'swipejs' там это новая ошибка: 

TypeError: swipejs__WEBPACK_IMPORTED_MODULE_1__.Swipe is not a constructor

Я впервые добавляю jquery в проект React, поэтому я не уверен, где go дальше. Любая помощь приветствуется.

1 Ответ

1 голос
/ 23 февраля 2020

Попробуйте добавить jQuery к своему проекту, сделайте это 

npm i jquery --save

, а затем импортируйте в свой компонент 

import $ from 'jquery'

и затем поместите свой код jquery в componentDidMount() например, 

  componentDidMount() {
    this.$el = $(this.el);
    this.$el.circlize({
      stroke: 15,
      percentage: 45,
      usePercentage: true,
      background: "#1abc9c",
      gradientColors: ["#ffa500", "#ff4500", "#ffa500"]
    });
  }

, чтобы получить дополнительную помощь, нажмите здесь React / ReactJS: Использование плагина jQuery с React

...