在 jquery 的可拖动辅助函数中实例化 React-component答案

【问题标题】：Instantiate React-component in jquery's draggable helper-function在 jquery 的可拖动辅助函数中实例化 React-component
【发布时间】：2015-07-05 08:30:37
【问题描述】：

我有一个实现为 React 组件的项目列表。这个列表是一个“工具箱”。如果我开始从这个列表中拖动一个项目，我希望它被表示为一个 React 组件的实例。

我的第一个方法是在我自定义的 jQuery 帮助函数中返回一个 React.render(<MyReactDiv>, document.body)，但我无法让它运行。

有什么建议吗？

到目前为止，我的代码是 (ES6)

ListPage.js

import React from 'react'
import MyReactDiv from './myReactDiv'
import $ from 'jquery'
import draggable from 'jquery-ui/draggable'

export default React.createClass({

  render () {
    return (
      <div>
        <ul>
          <li className='draggableLI'>one</li>
          <li className='draggableLI'>two</li>
          <li className='draggableLI'>three</li>
        </ul>
      </div>)
  },

  componentDidMount () {
    $('.draggableLI').draggable({
      // helper: 'clone', // <-- I dont want to clone the li
      helper: () => { // ... but want to return an instance of MyReactDiv during dragging
        // not working:
        // let content = React.render(<MyReactDiv>, document.body)
        // return content

        // working but duplicated code:
        return $('<div>A Div</div>')
      }
    })
  }
}

MyReactDiv.js

import React from 'react'

export default React.createClass({

  render () {
    return (<div>A Div</div>)
  }
}

【问题讨论】：

为什么要同时使用 React 和 jQueryUI-draggable。 React 有一些本地解决方案。看看这个答案：stackoverflow.com/questions/20926551/…
原则上你是对的。我将 react-draggable 用于我的基本拖动操作。但在这种特殊情况下，我必须制作一个附加了 jsPlumb 端点的 div 可拖动。它们不会直接附加到 div，因此不会被拖到 react-draggabale 组件上。通过使用 jQuer.draggable() 可以工作。
你好@Benvorth 你有没有找到任何解决方案，面临同样的问题并提出了一个问题stackoverflow.com/q/50657089/4061006。对此的任何帮助都非常有帮助。

标签： javascript jquery reactjs drag ecmascript-6

【解决方案1】：

已经有一段时间了，希望你会发现这很有用。

为了使用 react 组件作为助手，我必须这样做：

jQuery('.draggable').draggable({
   helper: function() {
      var helper = jQuery('<div id="helper" class="helper"></div>');
      helper.appendTo(jQuery('body'));
      React.render(<Component/>, document.getElementById('helper'));
      return helper;
   },

【讨论】：