Как использовать функцию draggable() в React?

В моем коде React я пытаюсь преобразовать createClass в классы ES6, и здесь я борюсь:

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

(что раньше было: $(this.getDOMNode()).draggable(); до конвертации и работало отлично)

Ошибка, которую я получаю:

__WEBPACK_IMPORTED_MODULE

componentDidMount()
{
$(ReactDOM.findDOMNode(this)).draggable();
}
react_dom___default.a.findDOMNode(...).draggable не является функцией

введите здесь описание изображения

Я знаю, что draggable() — это функция пользовательского интерфейса jQuery, поэтому я попытался импортировать ее в тег script моего HTML-файла.

<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';

Кажется, что ничего не работает.


person Areeb Khan    schedule 29.04.2018    source источник
comment
Это не имеет ничего общего с react-native, верно?   -  person Yury Tarabanko    schedule 29.04.2018
comment
Как вы сказали, draggable - это плагин jquery. Поэтому вам нужен экземпляр jquery, чтобы использовать его. Почему вы удалили $(...node)?   -  person Yury Tarabanko    schedule 29.04.2018
comment
@YuryTarabanko О, извините, знак $ остался позади при копировании. Я обновил код здесь, и проблема все еще сохраняется.   -  person Areeb Khan    schedule 29.04.2018
comment
Да, я создаю приложение с помощью команды «create-react-app» в терминале.   -  person Areeb Khan    schedule 29.04.2018
comment
Тогда сообщение об ошибке должно быть другим :). Также убедитесь, что вы правильно импортируете модуль jquery-ui. jquery.fn.draggable должна быть функцией.   -  person Yury Tarabanko    schedule 29.04.2018
comment
О да, он показывает: TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).draggable is not a function сейчас. Помогите мне, пожалуйста?   -  person Areeb Khan    schedule 29.04.2018
comment
Убедитесь, что вы импортировали jquery-ui. Должно быть import 'jquery-ui' строка кода. Этот вопрос может быть полезен stackoverflow.com/questions/35259835/   -  person Yury Tarabanko    schedule 29.04.2018
comment
Я просто хотел сказать, что я впервые пользуюсь этим сайтом после того, как зарегистрировался более 2 лет назад. Если здесь все так же полезны, как и ты, я никогда не откажусь от этого. Большое вам спасибо :) Кроме того, как мне проголосовать за ваш ответ, чтобы другие нубы, такие как я, могли видеть?   -  person Areeb Khan    schedule 29.04.2018
comment
Я разместил ответ. Вы могли бы принять это, если это было полезно :)   -  person Yury Tarabanko    schedule 29.04.2018
comment
Готово и сделано. Спасибо :)   -  person Areeb Khan    schedule 01.05.2018


Ответы (1)


Как обсуждалось в комментариях.

Вам все еще нужно обернуть узел DOM экземпляром jQuery, чтобы использовать на нем плагины jquery.

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

Вам нужно импортировать модуль jquery-ui, чтобы улучшить прототип jQuery с помощью draggable, sortable и других плагинов jQueryUI.

import 'jquery-ui'; 
person Yury Tarabanko    schedule 29.04.2018