react.js - 使用react+react-dnd通过循环渲染子组件怎样拿到每个子组件的位置？

Question

使用react+react-dnd实现了类似上图的效果，不过目前的问题是，现在只能实现往后追加，不能实现从中间插入，如果要实现从中间插图需要获取右边每个子组件的位置
由于右边的效果是通过遍历实现的，所以通过ref的方法只能拿到最后一个元素的位置信息

 const elRef = useRef()import designComponents from './components'//。。。  const [{ canDrop }, drop] = useDrop({    accept: 'card',    canDrop: (_item, monitor) => {      const hoverBoundingRect = elRef.current?.getBoundingClientRect()        //这里每次输出拿到的都是最后一个子组件的位置**      console.log('��  DropSquare  hoverBoundingRect:', hoverBoundingRect)      return true    },    collect: (monitor) => ({      canDrop: !!monitor.canDrop(),    }),  })<div className='design-main' ref={drop}>      {dropLists.map((item, index) => {        const El = designComponents[item.element]        return (          // eslint-disable-next-line react/no-array-index-key          <div ref={elRef} key={`${item}-${index}`}>            <El />          </div>        )      })}    </div>

Answer 1

import React, { useRef, useMemo } from 'react';import { useDrop } from 'react-dnd';const MyComponent = ({ dropLists }) => {    const elRefs = useMemo(    () => Array.from({ length: dropLists.length }, () => React.createRef()),    [dropLists.length]  );  const [{ canDrop }, drop] = useDrop({    accept: 'card',    hover: (item, monitor) => {      const index = monitor.getItem().index;       const hoverBoundingRect = elRefs[index]?.current?.getBoundingClientRect();      console.log('Hovered Element Position:', hoverBoundingRect);    其他逻辑，比如插入位置的判断    },    collect: (monitor) => ({      canDrop: !!monitor.canDrop(),    }),  });  return (    <div className='design-main' ref={drop}>      {dropLists.map((item, index) => {        const El = designComponents[item.element];        return (          <div ref={elRefs[index]} key={`${item}-${index}`}>            <El />          </div>        );      })}    </div>  );};