Javascript 反应DND不开火下降并悬停在目标上

我遇到了一些麻烦，我想让DropTarget侧正常工作。当我拖动拖动源时，目标的

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

我已经确定了我的目标的

的实际大小，以便我可以悬停在上面，所以我知道这不是问题所在

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

export default {
  TOOLBAR_ITEM: 'TOOLBAR_ITEM',
};