在jquery的draggable helper-function中实例化React-component

Question

我有一个项目列表实现为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>)
  }
}

Answer 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;
   },