组件

#DndProvider

该组件为整个应用赋予react-dnd的功能，其中backend这个prop为必传属性，你也可以自定义window对象作为该prop的值.

#用法

js
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

#props

• backend 必传。可以是react提供的backend或者自定义。
• context 可选。用于配置backend的backend上下文。具体怎么配置取决于backend的实现。
• options 可选。用于配置backend的配置对象。该对象取决于backend的实现。

#DragPreviewImage

渲染拖拽元素的图片组件。

#用法

js
import { DragSource, DragPreviewImage } from 'react-dnd'

function DraggableHouse({ connectDragSource, connectDragPreview }) {
  return (
    <>
      <DragPreviewImage src="house_dragged.png" connect={connectDragPreview} />
      <div ref={connectDragSource}>🏠</div>
    </>
  )
}
export default DragSource(
  /* ... */
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview()
  })
)

#props

• connect 必填。拖动预览连接器函数