React-DND不触发空投并悬停在目标上

Question

我在使用React-DND时遇到了一些麻烦，试图使DropTarget端正常工作。当我拖动DragSource时，目标的canDrop会跳到true，但是isOver仍然为false，即使将源拖动到了上方。

对于DropSource，我具有以下内容：

import DropTypes from "../../common/DropTypes";

class ToolbarItem extends React.Component {
  render() {
    const { children } = this.props;

    // These two props are injected by React DnD,
    // as defined by your `collect` function above:
    const { isDragging, connectDragSource } = this.props;
    return connectDragSource(<div>{children}</div>);
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dragSource = {
  beginDrag(props, monitor, component) {
    return {
      description: props.description
    };
  }
};

/**
 * Specifies which props to inject into your component.
 */
function dragCollect(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging()
  };
}

console.log("Source DropType: ", DropTypes.TOOLBAR_ITEM);
const DragableToolbarItem = DragSource(
  DropTypes.TOOLBAR_ITEM,
  dragSource,
  dragCollect
)(ToolbarItem);

对于DropTarget我有：

import DropTypes from "../../common/DropTypes";

class TemplateEditor extends React.Component {
  componentDidMount() {}

  render() {
    console.log("props: ", this.props);
    const { isOver, canDrop } = this.props;
    return (
      <div className="h-100">
        Editor{isOver ? " - OVER!" : ""}
        {canDrop ? " - CAN DROP!" : ""}
      </div>
    );
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dropSource = {
  drop(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  },
  hover(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  }
};

const dropCollector = (connect, monitor) => ({
  isOver: monitor.isOver(),
  item: monitor.getItem(),
  canDrop: monitor.canDrop()
});

// export default TemplateEditor;
console.log("Target DropType: ", DropTypes.TOOLBAR_ITEM);
export default DropTarget(DropTypes.TOOLBAR_ITEM, dropSource, dropCollector)(
  TemplateEditor
);

DropTypes只是我在其中设置类型的const，因此我可以确保将它们正确设置在源和目标上：

export default {
  TOOLBAR_ITEM: 'TOOLBAR_ITEM',
};

我已经确保目标的<div>的大小可以调整，以便可以将鼠标悬停在上面，所以我知道这不是问题。