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

已经有一段时间了，所以希望你会觉得这很有用。

为了使用反应组件作为助手，我必须做这样的事情：

$model_cat_parent->parent_id = ${$category_header."_".($i-1)};
$model_cat_parent->child_id = $last_inserted_row_category_id;

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

1 个答案: