React-Dnd：动态DropTarget和DragSource类型

Question

我正在构建一个多级嵌套拖放列表。每个嵌套列表都需要允许仅在其自身内拖动。这需要为type和DragSource设置运行时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.