"Expected drop context“上的最小react-dnd钩子示例中断
"Expected drop context“上的最小react-dnd钩子示例中断
提问于 2021-03-18 21:09:23
我在实践中构建了一个最小的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中的完整复制品。
有什么想法可能是这里的问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-18 21:52:31
DndProvider必须位于使用useDrag / useDrop挂钩的组件的外部。它应该从App组件中分离出来，如下所示：
<DndProvider backend={HTML5Backend}>
<App />
</DndProvider>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66691773
复制相关文章
相似问题
腾讯云开发者
