将Jquery函数导入React

Question

我拥有使用swipejs.org / html创建的此滑动功能，该功能最初是为其他人使用的，但是正在我自己的项目中使用。

我首先在jsfiddle上创建了我想在HTML和Jquery中执行的功能的功能版本：https://jsfiddle.net/sbfield/nojhqbtx/1/

此后，我为此创建了一个react组件：

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>
    </>
  )
}

我已将swipejs的CDN添加到我的React index.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

我已经将swipejs作为npm软件包https://www.npmjs.com/package/swipejs安装，但是当我尝试使用import { Swipe } from 'swipejs'时，出现了一个新错误：

TypeError: swipejs__WEBPACK_IMPORTED_MODULE_1__.Swipe is not a constructor

这是我第一次将jquery添加到React项目中，所以我不确定下一步要去哪里。任何帮助表示赞赏。

Answer 1

尝试将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: Using a jQuery Plugin with React