我如何使用＆＃34; draggable（）＆＃34;在React功能？

Question

在我的React代码中，我尝试将 createClass 转换为 ES6 Classes ，并且我在这里挣扎：

componentDidMount()
{
$(ReactDOM.findDOMNode(this)).draggable();
}

（曾经是：   $(this.getDOMNode()).draggable(); 在转换之前，并且完美地工作）

我得到的错误是：

  

__ WEBPACK_IMPORTED_MODULE_1_react_dom ___ default.a.findDOMNode（...）。draggable不是函数

我知道draggable（）是jQuery UI中的一个函数，所以我尝试在HTML文件的script标签中导入它。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

我在我的React文件中包含以下内容：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import $ from 'jquery'; 
import css from './style.css';

似乎什么都没有用。

Answer 1

如评论中所述。

你仍然需要用jQuery实例包装DOM节点来使用jquery插件。

componentDidMount() {
  // $() is important
  $(ReactDOM.findDOMNode(this)).draggable();
}

您需要导入jquery-ui模块以使用draggable，sortable和其他jQueryUI插件来增强jQuery原型。

import 'jquery-ui';