通过数组拆分多个 canDrops 的 React-dnd

如何解决通过数组拆分多个 canDrops 的 React-dnd

我正在构建从一个 div 容器到另一个的拖放。如果我不将放置区域分成单独的 div，它在正常情况下可以使用下面的代码工作。然而，这是我需要做的，所以我隐藏了 div 的步骤，然后使用下一个上一个按钮来切换它们，但是我无法创建 4 个单独的放置区，因为该数字可能会动态变化。

所以我的问题是如何根据包含在其中的数组拆分 can drop 部分以使其动态化。我主要指的是 Box.map 区域，因为它是在您拖入任何元素时生成结果的原因，因为我将它包含在另一个数组中，但在这种情况下我需要有多个 CanDrops 会有 4 个，因为 stepBlock 是等于 4，但我不确定如何将其绑定到父数组中。这是我的代码：

 import { useDrag,useDrop,useDragLayer } from 'react-dnd'               
                
  let stepBlock = 4;

const ELEMENT = 'element';

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

const [{ canDrop,isOverCurrent },drop] = useDrop({
    accept: 'element',canDrop: () => true,drop: item => {
    if (isOverCurrent) {
    setBoxes([...Boxes,item]);
    }
    },collect: monitor => ({
    canDrop: monitor.canDrop(),isOverCurrent: monitor.isOver({ shallow: true })
    )
})

 <div className={'StepContainer'}>

  <div className={'stepControls'}>
      <div ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
           <div className='element' ref={drag}>
      </div>          
   </div>
 </div>

{[...Array(stepBlock)].map((e,i) =>
<div key={i} className={`stepBlock ${i !== index ? "hidden" : ""}`}>
    {Boxes.map(member => (
        <div className="Box">
        {member.name}
        </div>
    ))}
    <div className={`drop-area ${canDrop ? 'highlight': ''}`} ref={drop}>
    {canDrop ? 'Release to drop' : 'Drag a Box here'}
    </div>
</div>
)}

</div>

<div className={'toggleBTNContainer'}>

<button
 disabled={index === 0}
 onClick={() => setIndex((prevIndex) => prevIndex - 1)}
 className={'prevIoUsBTN'}>prevIoUs</button>
 <button
   disabled={index === stepBlock - 1}
    onClick={() => setIndex((prevIndex) => prevIndex + 1)}
     className={'nextBTN'}>next</button>
</div>
</div>