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

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 ( {dropLists.map((item, index) => { const El = designComponents[item.element]; return ( ); })} ); };