React-Dnd：动态 DropTarget 和 DragSource 类型

Question

我正在构建一个多级可嵌套拖放列表。每个嵌套列表需要只允许在其内部拖动。这需要为 DragSource 和 DropTarget.

设置运行时间 type

编译时 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.

React-Dnd：动态 DropTarget 和 DragSource 类型

React-Dnd: Dynamic DropTarget and DragSource type

reactjs

react-dnd