使组件可使用react-dnd拖动

Question

我正在尝试使用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，因为在示例中未使用它。

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

我正在尝试使用react-dnd拖动组件，我将尝试像本示例一样进行拖动，但目前仅拖动。在我所有组件顶部的应用程序中，我导入react-dnd-html5-backend并包装我的...

Answer 1

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