reactjs - React-Dnd：动态 DropTarget 和 DragSource 类型

Question

我正在构建一个多级可嵌套拖放列表。每个嵌套列表只需要允许在其内部拖动。type这需要为DragSourceand设置运行时DropTarget。

编译时type声明有效但受到限制

export default flow(
  DropTarget(ItemLevel.ROOT, target, connect => ({
    connectDropTarget: connect.dropTarget(),
  })),
  DragSource(ItemLevel.ROOT, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  })),
)(MenuItem)

运行时type声明似乎有效，但在拖动时会引发错误

export const getGroupMenuItem = menuGroupId => flow(
  DropTarget(menuGroupId, target, connect => ({
    connectDropTarget: connect.dropTarget(),
  })),
  DragSource(menuGroupId, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  })),
)(MenuItem)

Answer 1

根据 react-dnd 文档，类型可能是a function which is given component's props. This drop target will only react to the items produced by the drag sources of the specified type or types.