javascript - 将 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