React-dnd 多个元素

Question

我可以轻松地进行react-dnd拖动，让单个元素可以拖动，但是我有4个字段的数组，我想使其可拖动。在下面的示例代码中，它通过映射数组创建四个框，每个框都有一个“element”的类名。这应该使它们都可以拖动，但它们不会移动。

这是我的拖动代码：

 const ELEMENT = 'element';
    const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
      type: ELEMENT,
      collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }))

这是我的可拖动元素：

 {FieldDetail.map((e,i) =>  
   <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
        <div className='element' ref={drag}></div>            
    </div>          
  )} 

有任何想法吗？我需要在类型或类名中做更多的事情吗？

Answer 1

我遇到了类似的问题 - 我发现你可以调用drag(ref)一个普通的 ref 并将其与 DnD 链接起来。

对于您的用例，我会尝试预先分配引用并调用drag每个引用：

// generate refs
const refs = FieldDetal.map(x => useRef());

// call drag on each ref, linking it up with React DnD
refs.forEach(x => drag(x));

// And then when you render your component, use the refs 
{FieldDetail.map((e,i) =>  
   <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
        <div className='element' ref={refs[i]}></div>            
    </div>          
  )}

未经测试，但这个总体想法应该可以帮助您到达您需要的位置。您甚至可以通过调用将某些内容既作为拖放目标又作为拖放目标drop(drag(ref))。