Получить размер каждого элемента, возвращаемого с помощью функции карты в React

Я хочу сделать некоторые операции с размером некоторых элементов в моем приложении React.

Что я обычно делаю, так это использую refs Но дело в том, что мои элементы рендерятся в цикле карты вот так:

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

Как я могу получить размер каждого элемента, отображаемого с помощью этого Array.map?

(Мне нужен размер, чтобы выполнить некоторые вычисления, чтобы получить соответствующее значение «max-height» для каждого элемента).

Спасибо за вашу помощь !

Пока элементы фактически не находятся в DOM, невозможно получить размер (если вы не исправите размер с помощью стилей, но тогда у вас не возникнет проблемы в первую очередь).

Pointy 19.11.2022 12:23

Создать компонент, который возвращает div и содержит всю логику размеров?

Bqardi 19.11.2022 12:23
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
2
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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, но при первом рендере все они нулевые...

Louis Lecouturier 19.11.2022 13:06

добавить refs в массив useEffect для обнаружения изменений ref

Sachila Ranawaka 19.11.2022 13:10

Другие вопросы по теме