Question

我有一个带有根“ Tree”组件的树结构，该组件具有根“ TreeNodes”列表，然后TreeNode可以具有任意数量的子代。

因此在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;

然后，render方法的最终返回结果类似于

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);

然后在我要导出的父树文件中

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>
);

这很好用，但仅适用于rootnodes，当我尝试渲染子代（仅在单击父代后才填充childrenHTML变量）时，出现以下错误： TypeError：connectDragPreview不是函数< / strong>

使我相信，来自“收集”功能的那些react-dnd道具不会传递给根节点，而不会传递给子节点。在我看来，这是因为对于同一个班级的孩子来说，应该为父母和孩子执行相同的代码。

我反应较新，对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} />;
  });

我仍然不确定这个的技术原因，但是，此修复程序似乎对其他人有用，并且对我有用！

具有子DragSource的react-dnd DragSource

1 个答案: