Question

我有以下代码

const VisiblePropsPanelItem = React.forwardRef(
({ classes, onChangeValue, attrib, isDragging, connectDragSource, connectDropTarget }, ref) => {
    const elementRef = useRef(null)
    connectDragSource(elementRef)
    connectDropTarget(elementRef)


    const opacity = isDragging ? 0 : 1
    useImperativeHandle(ref, () => ({
        getNode: () => elementRef.current,
    }))
const value = !!(attrib.value)

    return (
  <div ref={elementRef} key={ attrib.name } className = { classes.statusTaskUnit }>
        <CheckBox
          className = { classes.statusCheckBox }
          color = "primary"
          value = { value }
          onChangeValue = { () => { onChangeValue(attrib) } }
        />
        <div className = { classes.statusTextUnit }>{ attrib.name }</div>
          <IconButton aria-label="Comments">
            <DragIcon />
          </IconButton>
    </div>
    )
},
)

export default DropTarget(
CARD,
{
    hover(
  props: MyProps,
        monitor: DropTargetMonitor,
        component: CardInstance,
    ) {
        if (!component) {
            return null
        }
        const node = component.getNode()
        if (!node) {
            return null
        }
        const dragIndex = monitor.getItem().index
        const hoverIndex = props.index

        if (dragIndex === hoverIndex) {
            return
        }

        const hoverBoundingRect = node.getBoundingClientRect()

        const hoverMiddleY =
            (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2

        const clientOffset = monitor.getClientOffset()

        const hoverClientY = (clientOffset).y - hoverBoundingRect.top

        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
            return
        }

        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
            return
        }

    },
},
(connect: DropTargetConnector) => ({
    connectDropTarget: connect.dropTarget(),
}),
)(
DragSource(
    CARD,
    {
        beginDrag: (props: MyProps) => ({
            name: props.attrib.name,
            value: props.attrib.value,
        }),
    },
    (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging(),
    }),
)(VisiblePropsPanelItem),
)

但是当我尝试运行它时，我得到：未捕获的不变违规：在DragSource（组件）的上下文中找不到拖放管理器。确保您的应用程序具有DragDropContext。

我该如何解决？

代码是从这里获取的：https://github.com/react-dnd/react-dnd/blob/master/packages/examples/src/04-sortable/simple/Card.tsx

Answer 1

您需要使用dragDropContext或dragDropContextProvider包装您的根组件。

例如：

{{1}}

Full example

如何修复“在DragSource（Component）的上下文中找不到拖放管理器”

1 个答案: