javascript - 在 jquery 的可拖动辅助函数中实例化 React 组件

Question

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

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

有什么建议吗？

到目前为止我的代码是(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;
   },