使用 react-dnd 使组件可拖动答案

【问题标题】：Make component draggable using react-dnd使用 react-dnd 使组件可拖动
【发布时间】：2020-05-10 15:09:03
【问题描述】：

我正在尝试使用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 不是一个函数在 HTML5Backend.connectDragSource (HTML5Backend.js:487) 在 SourceConnector.reconnectDragSource (SourceConnector.js:115)

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

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

【问题讨论】：

应该将 ref 赋予 HTML 元素。您将其传递给 Persona 组件。尝试将 ref 分配给 html DOM，例如 div

标签： javascript reactjs react-dnd

【解决方案1】：

正如@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>
  );
}

我的组件.js

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

Try it on codesandbox.io!

【讨论】：