gpt4 book ai didi

javascript - 使用react-dnd使组件可拖动

转载 作者:行者123 更新时间:2023-12-03 14:22:05 25 4
gpt4 key购买 nike

我正在尝试使用 react-dnd 拖动组件

我会尝试像this example那样但只是暂时拖拽。

在我的应用程序中,在所有组件之上,我导入 react-dnd-html5-backend 并包装我的应用程序:

import Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

render(
<Provider store={store}>
<FluentuiProvider theme={themes.teams}>
<DndProvider backend={Backend}>
<App theme={themes.teams} />
</DndProvider>
</FluentuiProvider>
</Provider>,
document.getElementById('root')
)

然后在我的组件中:

import { useDrag } from 'react-dnd';

export default ({ call, pauseCall, onHoldCalls, endCall, addNote }) => {
const [collectedProps, drag] = useDrag({
item: { type: 'Personna' },
})
return (
<div className="personna">
<Persona ref={drag} {...call.CALL_DETAILS.personInfos["formattedPersData"]} size={PersonaSize.size40} />
</div>
)
}

当我渲染组件时,出现此错误

TypeError: node.setAttribute is not a function at HTML5Backend.connectDragSource (HTML5Backend.js:487) at SourceConnector.reconnectDragSource (SourceConnector.js:115)

我没有添加 dragSource 因为在示例中它没有被使用。

我不知道为什么会收到此错误消息。

最佳答案

正如@Panther所说,ref应该放置在 HTML 元素上,而不是 React 组件上:

return <div ref={drag}>{"Drag me!"}</div>;

或者,根据您的情况,您可以添加 ref<div className="personna">容器:

return (
<div ref={drag} className="personna">
<Persona ....

<小时/>为了帮助您了解最小阻力示例,请看一下这个非常简单的设置:

应用.js

import React from "react";
import Backend from "react-dnd-html5-backend";
import { DndProvider } from "react-dnd";
import { MyComponent } from "./MyComponent";
import "./styles.css";

export default function App() {
return (
<DndProvider backend={Backend}>
<div className="App">
<MyComponent />
</div>
</DndProvider>
);
}

MyComponent.js

export default function App() {
return (
<DndProvider backend={Backend}>
<div className="App">
<MyComponent />
</div>
</DndProvider>
);
}

Try it on codesandbox.io!

关于javascript - 使用react-dnd使组件可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61714172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com