Align

组件

Align
2023-08-29
1 min

DndProvider

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

用法

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

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

用法

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 必填。拖动预览连接器函数