如何修复'无法在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),
)

但是当我尝试运行它时，我得到：Uncaught Invariant Violation：在DragSource（Component）的上下文中找不到拖放管理器。确保您的应用程序具有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