简单的树视图与react-dnd

Question

我正在尝试创建一个由react-dndframework（？）启用DnD的简单树视图React组件。我尝试了react-sortable-tree，但是由于我现在不记得的原因放弃了它（必须对其进行自定义，但是代码对我来说太复杂了）。到目前为止，我有两个主要组件：树节点本身和包含两个div的的drop overlay，用于在之前和之后进行删除。该节点的编码如下：

class Node extends Component {
    ....

    render() {
        const {
            data,
            depth,
            is_group,
            connectDragSource
        } = this.props;
        ...
        for (let kid_id of kids)
                childElements.push(
                    <ConnectedQuestionNode
                        id={kid_id}
                        is_group={areChildrenGroups}
                        depth={depth + 1}
                        key={kid_id}
                    />);
         return (
            <Fragment>
                {connectDragSource(<div
                    className="tree-row"
                    style = {{ left: treeBlockIndent * depth + 'px' }}
                >
                    {prefix}
                    <div className="tree-row-title">
                        {data.title}
                    </div>
                    <DropOverlay
                        id={data.id}
                        nodeIsGroup={is_group}
                        nodeHasSubgroups={hasSubgroups}
                        moveActionCreator={moveQuestion}
                        moveGroupActionCreator={moveQuestionGroup}
                        nodeItemType={ItemTypes.QUESTION_NODE}
                    />
                </div>)}
                {childElements}
            </Fragment>
        );
    }
}

之后，将其connect编入ConnectedQuestionNode（此处不相关）。这里是DropOverlay：

class _DropOverlayHalf extends Component {
    render() {
        const cls = 
            "drop-overlay"
            + (this.props.isTop ?
                " top" : " bottom")
            + (this.props.isOver ? 
                " over" : " not-over")
            + (this.props.canDrop ?
                " can-drop" : " cant-drop");
        return this.props.connectDropTarget(<div className={cls}/>);
    }
}

const DropOverlayHalf = DropTarget(props => props.nodeItemType, dropTargetSpec, collect)(_DropOverlayHalf);

class _DropOverlay extends Component {
    render() {
        return <Fragment>
            <DropOverlayHalf
                {...this.props}
                isTop={true}/>
            <DropOverlayHalf
                {...this.props}
                isTop={false}/>
        </Fragment>
    }
};

const DropOverlay = connect(null, dispatch => ({ dispatch }))(_DropOverlay);

collect并dropTargetSpec没有什么异常。该树正常渲染，但是react-dnd对于每个当前渲染的DropOverlayHalf ，“ canDrop”事件以某种方式在悬停时触发。而且，monitor.isOver()始终返回false。我无所适从。也许我要尝试重写它，以便所有内容都嵌套而不是我当前拥有的缩进列表。希望一些狂野的React大师出现并指出正确的方向:)

更新：hover根本没有触发，这意味着问题是monitor.isOver()。