如何将 jquery ui 导入 React 组件

Question

我有一个 React 应用程序运行 webpack，我想使用 jquery UI 使元素可拖动。我用

添加了库

如何将 jquery ui 导入组件

错误： (...).draggable 不是函数 $(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)
          }
        }
      })
    })
  }
}

Answer 1

看来你可以像这样导入各种 jquery ui 'widgets'

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

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

如何将 jquery ui 导入 React 组件

How to import jquery ui into a React compoent

jquery-ui

reactjs