如何修复 'Could not find the drag and drop manager in the context of DragSource(Component)'

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 包装您的根组件。

例如：

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext as dragDropContext } from "react-dnd";
import DragBox from "./DragBox";
import DropBox from "./DropBox";

class MainContext extends Component {
  render() {
    return (
      <div style={{ borderStyle: "solid" }}>
        <p style={{ padding: "0px 10px" }}>Main Context</p>
        <DragBox />
        <DropBox />
      </div>
    );
  }
}

module.exports = dragDropContext(HTML5Backend)(MainContext);

Full example

如何修复 'Could not find the drag and drop manager in the context of DragSource(Component)'

How to fix 'Could not find the drag and drop manager in the context of DragSource(Component)'

reactjs

drag-and-drop

react-dnd