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