Javascript 在jquery'中实例化React组件；s可拖动辅助函数

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

我的第一种方法是在我定制的jQuery助手函数中返回

React.render（，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>')
      }
    })
  }
}

import React from 'react'

export default React.createClass({

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

从“React”导入React
从“/MyReactDiv”导入MyReactDiv
从“jquery”导入$
从“jquery ui/draggable”导入draggable
导出默认的React.createClass({
渲染（）{
返回(

一个
两个
三个

)
},
组件安装（）{
$（'.draggableLI'）.draggable({
//helper:'clone'，//{//…但希望在拖动过程中返回MyReactDiv的实例
//不工作：
//让内容=React.render（，document.body）
//返回内容
//工作但重复的代码：
返回$（'A Div'）
}
})
}
}

MyReactDiv.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>')
      }
    })
  }
}

import React from 'react'

export default React.createClass({

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

从“React”导入React
导出默认的React.createClass({
渲染（）{
返回（A分区）
}
}

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

为了使用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;
   },

jQuery（'.draggable'）.draggable({
助手：函数（）{
var helper=jQuery（“”）；
appendTo（jQuery（'body'）；
React.render（，document.getElementById（'helper'）；
返回助手；
},

为什么要同时使用React和jQueryUI Dragable。React有一些本机解决方案。看看这个答案：原则上你是对的。我使用React Dragable进行基本的拖动操作。但在这种特殊情况下，我必须创建一个连接了JSplump端点的div Dragable。它们不会直接和直接连接到div所以不会被拖拽到react draggable组件上。通过使用jquery.draggable（）这是可行的。hello@Benvorth面对同样的问题，你是否找到了解决方案，并提出了一个问题。这方面的任何帮助都非常有用。