在 React 中使用 map function 获取返回的每个元素的大小

Question

我想对我的 React 应用程序中的某些元素的大小进行一些操作。

我通常会做的是使用refs但问题是我的元素是在 map 循环中呈现的，如下所示：

listings.map((listing, index) => <div key={index} className={styles.listing}>listing {index}</div>)

如何检索使用此Array.map呈现的每个元素的大小？

（我需要尺寸来做一些计算以获得每个元素的适当“最大高度”值）。

谢谢你的帮助 ！

Answer 1

可以创建一系列 useRef 并将它们分配给元素

const refs = useRef(listings.map(React.createRef))

listings.map((listing, index) => <div key={index} className={styles.listing} ref={refs.current[index]}>listing {index}</div>)