最小的 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>