使用 react-dnd 使组件可拖动
Make component draggable using react-dnd
我正在尝试使用 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 ....
为了帮助您了解最小阻力示例,请看一下这个非常小的设置:
App.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>
);
}
我正在尝试使用 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 ....
为了帮助您了解最小阻力示例,请看一下这个非常小的设置:
App.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>
);
}