React-dnd: 如何使用第三方组件作为拖动源？

好问题。 我认为你应该能够做到这一点：

import { findDOMNode } from 'react-dom';

class DraggableListGroupItem extends Component {
  render() {
    const { connectDragSource, ...rest } = this.props;
    return (
      <ListGroupItem
        {...rest}
        ref={instance => connectDragSource(findDOMNode(instance))}
      />
    );
  }
}

export default DragSource(...)(DraggableListGroupItem);

这是有效的，因为connect*()函数会查看您传递给它们的内容。 它们可以声明式地使用（传递一个 DOM React 元素并返回一个 DOM React 元素）或命令式地使用（使用 DOM 节点调用它们并且不要忘记稍后使用null调用它们——就像 refs 工作一样）。

（这也让你可以自由地使用其他一些 DOM 元素作为拖动源——例如，你可以查询从findDOMNode()获得的节点。这应该作为最后的手段，因为依赖内部第三方组件的 DOM 结构。）

这对我不起作用。 嵌套现在是正确的，但元素不可拖动，我在控制台中收到以下错误：

Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(…)

我相信你打字

import findDOMNode from 'react-dom';

而不是

import { findDOMNode } from 'react-dom';

实际上react-dom没有默认导出，这就是为什么我使用名为findDOMNode的特定命名导出。 更多关于默认导出和命名导出的区别： http :

我正在尝试编写一个简化的示例，但您首先发现了错误！

我知道默认导出和命名导出之间的区别，但我并不总是注意到我需要哪一个，并且调试工具并不擅长给出显示正在发生的事情的错误消息。 我现在可以看到该错误消息如何指向问题，即使它已被 Webpack 破坏。 谢谢你的教训！

PS：如果我要提交拉取请求以将其添加到文档中（不确定我是否有时间），我会将它放在哪里？ 如果 connectDragSource 错误指向此解决方案，这将有所帮助。

不确定，我认为当前的消息已经足够好了。 现在我们也有谷歌搜索这个问题:-)

顺便说一句，我重新阅读了您的问题，并想说明一点，您绝对不必专门将其包装在<div> 。 错误消息的要点是connectDragSource()需要包装任何 DOM 元素—— <div> 、 <li>或其他任何元素。 对于自定义组件，您只需要上述解决方法。

现在我们也有谷歌搜索这个问题:-)

幸运的是！ ：咧嘴笑：

只是想附加一点精度，如果您习惯于在render()链接connect*()调用，则同样不适用于上述方法，而是需要执行下列的：

ref={instance => {
  const node = findDOMNode(instance);
  connectDragSource(node);
  connectDropTarget(node);
}}

2个问题：
一季度。 您也可以使用第三个零件库作为拖动目标。 用例将使用 reactstrap "Container" 作为目标并在其中放置 "Row" 或其他组件来构建页面
Q2。 看起来 findDOMNode 不适用于功能组件。 如果某些 3rd 方组件功能正常，如何对其进行拖放？