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

 使用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(), }), }) {dropLists.map((item, index) => { const El = designComponents[item.element] return ( // eslint-disable-next-line react/no-array-index-key ) })}