最小的 react-dnd 挂钩示例在 "Expected drag drop context" 上中断

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>

最小的 react-dnd 挂钩示例在 "Expected drag drop context" 上中断

Minimal react-dnd hooks example breaks on "Expected drag drop context"

reactjs

react-dnd