react-dnd DragSource 具有 child DragSource

Question

我有一个树结构，其根 "Tree" 组件具有根列表 "TreeNodes"，然后 TreeNodes 可以具有任意数量的 children。

所以在 TreeNode 渲染方法中我有

  childrenHTML = this.state.children.map((child) => {
    return (<TreeNode nodeClick ={this.props.nodeClick} parentNode={this} 
       key={child.childId} node={child} level={this.state.level+1} />);
  });

和

const { isDragging, connectDragSource, connectDragPreview} = this.props;

然后渲染方法的最终 return 看起来像

return connectDragSource(
  <div>
    <div style={nodeStyle}>
        {connectDragPreview(
        <div className = {"nodeContainer" + ' ' + this.state.nodeHover} onMouseLeave={this.nodeUnHover} onMouseOver={this.nodeHover} onClick={()=>this.props.nodeClick(this)}>
          <img alt = {this.state.titleIcon} className = "titleIcon" src = {Connections.getImageURLByName(this.state.titleIcon)} />
          <p className="nodeLabel"> {this.state.nodeName}</p>
          {nodeLabelsHTML}
          <DescriptiveIcons descriptiveIcons={this.state.icons} />
        </div>
        )}
    </div>
    {childrenHTML}
  </div>
);

我正在导出：

export default DragSource(DragTypes.STRUCTURE, treeNodeSource, collect)(TreeNode);

然后在我导出的 parent 树文件中

export default DragDropContext(HTML5Backend)(Tree)

并像

一样渲染根节点

  rootNodesHTML = rootNodes.map((node) => {
    return <TreeNode nodeClick={this.props.nodeClick} key={node.childId} node={node} level={0}/>
  });

...

return (
  <div className="treeContainer">
    <div className="wrapContainer">
      {rootNodesHTML}
    </div>
  </div>
);

这很好，但仅适用于根节点，当我尝试呈现 children（childrenHTML 变量仅在单击 parent 后填充）我得到以下错误：TypeError: connectDragPreview 不是函数

让我相信那些来自 "collect" 函数的 react-dnd 道具没有被传递到根节点，而不是 children。对我来说似乎应该这样做，因为应该为 parent 执行与 children 相同的代码，因为它是相同的 class... 真的卡在这里了。

我对 React 比较陌生，对 HOC 等想法也很陌生，因此欢迎所有提示或建议。谢谢！

Answer 1

我能够让它工作。查看线程末尾发布的示例 https://github.com/react-dnd/react-dnd/issues/332。

最终的解决方案是使用非常简单的渲染方法

将 TreeNode 包装在 "DragContainer" 中

render(){
    const {...props} = this.props;
    return <TreeNode {...props}/>
}

然后在 TreeNode 渲染方法中，当渲染子节点时渲染一个 DragContainer 代替，传递所有常用的道具。

  childrenHTML = this.state.children.map((child) => {
    return <DragNodeContainer modalFunctions = {this.props.modalFunctions} nodeClick ={this.props.nodeClick} parentNode={this} key={child.childId} node={child} level={this.state.level+1} />;
  });

我仍然不确定这其中的技术原因，但是，该修复程序似乎对其他人有效，对我也有效！

react-dnd DragSource 具有 child DragSource

react-dnd DragSource that has child DragSource

javascript

reactjs

react-dnd