"Expected drop context“上的最小react-dnd钩子示例中断

Question

我在实践中构建了一个最小的react-dnd钩子API示例，它遇到了一个运行时错误：

import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export default function App() {
  var matchDrag = useDrag({
    type: "FILE"
  });
  var matchDrop = useDrop({
    accept: "FILE",
    drop: function (item, monitor) {
      console.log("dropped");
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrag[1]}>Drag</div>
      </DndProvider>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrop[1]}>Drop</div>
      </DndProvider>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

以下是CodeSandbox：https://codesandbox.io/s/long-rgb-c4i69?file=/src/App.js中的完整复制品。

有什么想法可能是这里的问题吗？

Answer 1

DndProvider必须位于使用useDrag / useDrop挂钩的组件的外部。它应该从App组件中分离出来，如下所示：

<DndProvider backend={HTML5Backend}>
  <App />
</DndProvider>