Получить размер каждого элемента, возвращаемого с помощью функции карты в React
Я хочу сделать некоторые операции с размером некоторых элементов в моем приложении React.
Что я обычно делаю, так это использую refs Но дело в том, что мои элементы рендерятся в цикле карты вот так:
listings.map((listing, index) => <div key={index} className={styles.listing}>listing {index}</div>)
Как я могу получить размер каждого элемента, отображаемого с помощью этого Array.map?
(Мне нужен размер, чтобы выполнить некоторые вычисления, чтобы получить соответствующее значение «max-height» для каждого элемента).
Спасибо за вашу помощь !
Создать компонент, который возвращает div и содержит всю логику размеров?
Ответы 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>)
Я не знал, что это возможно! Как теперь я могу применить свой рост в моем реквизите style? Я попытался сохранить все высоты в состоянии с помощью useEffect, но при первом рендере все они нулевые...
добавить refs в массив useEffect для обнаружения изменений ref
Пока элементы фактически не находятся в DOM, невозможно получить размер (если вы не исправите размер с помощью стилей, но тогда у вас не возникнет проблемы в первую очередь).