如何将jQuery UI导入React组件 [英] How to import jquery ui into a React compoent

问题描述

我有一个与webpack一起运行的react应用，我想使用jquery UI使元素可拖动.我已经用

I have a react app running with webpack and I want to make an element draggable using jquery UI. I've added the library with

如何将jquery ui导入组件

How can I import jquery ui into the component

错误:(...).可拖动不是函数$(this.productElm).draggable({

Error: (...).draggable is not a function $(this.productElm).draggable({

//Install:
yarn add jquery-ui  

// Component file:

import $ from "jquery";
import draggable from 'jquery-ui';

export class Item extends React.Component {
  componentDidMount(){
     this.setPlacement();
     document.addEventListener('mousedown', this.handleOutsideClick, false)
      this.initInterations()
  }

initInterations(){
    setTimeout(() => {
      $(this.productElm).draggable({
        addClasses: false,
        stop: (e, ui) => {
          if(this.props.onChange){
            this.props.onChange({
              name: 'move',
              x: ui.position.left,
              y: ui.position.top
            }, this.props.item)
          }
        }
      })
    })
  }
}

推荐答案

似乎可以像这样导入各种jquery ui'widgets'

Seems like you can import the various jquery ui 'widgets' like this

import 'jquery-ui/ui/widgets/draggable';
import 'jquery-ui/ui/widgets/resizable';

要确定导入路径，请在节点模块文件夹中查找要导入的内容.

To work out the path for the import, lookin the node modules folder for what you are importing.

这篇关于如何将jQuery UI导入React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！