将Jquery函数导入React

Question

我用swipejs.org/html创建了这个滑动函数，它最初是为其他人创建的，但现在正在我自己的项目中使用。

我首先用HTML&jsfiddle上的Jquery：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>
</>
)
}

我已经在React index.html文件中添加了用于swipejs的CDN：

<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/RectJS：使用带有React 的jQuery插件