React-Dnd:动态 DropTarget 和 DragSource 类型
React-Dnd: Dynamic DropTarget and DragSource type
我正在构建一个多级可嵌套拖放列表。每个嵌套列表需要只允许在其内部拖动。这需要为 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)
根据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.
我正在构建一个多级可嵌套拖放列表。每个嵌套列表需要只允许在其内部拖动。这需要为 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)
根据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.