如何在功能组件中实现react-dnd-text-dragpreveiew？

Question

我正在使用react-dnd，并且可以在拖动时放置图像，但是现在我想代替想要自定义文本的图像。

我发现此组件react-dnd-text-dragpreview，但示例是针对React类组件。

我试图将“ DragPreviewImage”放在“ DragPreviewImage”的SRC中，但行不通。

有人可以帮我吗？

提前致谢 ！

< DragPreview

带有图像的示例代码

...
import { DragPreviewImage, useDrag } from 'react-dnd';
import { boxImage } from '../components/boxImage';
import { createDragPreview } from 'react-dnd-text-dragpreview'


function FieldDrag({ field, dropboxField, onDragEnd = () => null, setFieldValue = () => null, cargoCategories }) {
const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: 'field',        
    item: { id: field.id, dragCargoInfoId: field.dragCargoInfoId, dragCargoInfo: field.childDragCargoInfo },
    collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
    }),
    end: (item) => endDrag(item),
}));

const endDrag = (item) => {
    onDragEnd(item);
};

const styles = {
  fontSize: '12px'
}

const dragPreviewImage = createDragPreview('Custom Drag Text', styles);

.....

 return (
  <>
    <DragPreviewImage connect={preview} src={boxImage} />
    <span ref={drag} className="flex-item" style={{ ...computedStyle, ...styleDropboxField }}>
        {getField(field, extraStyle, isboxed, cargoCategories)}
    </span>
  </>
);

拖动

Answer 1

我在codesandbox中找到了解决方案 - ＆gt;

只需添加src image“ dragpreviewimage.src”即可。

<DragPreviewImage connect={preview} src={dragPreviewImage && 
   dragPreviewImage.src} />