Измерение абсолютного положения ряда элементов DOM в React

Песочница: https://codesandbox.io/s/8292lmypz2

Я пытаюсь измерить абсолютное положение некоторых div. Я обращаюсь к узлу DOM div через перенаправленный ref (React.forwardRef()) в интересующий меня div. В конструкторе моего родительского компонента я заполняю массив с React.createRef(), которые затем назначаю каждому div. ref итеративно по мере их рендеринга. Наконец, я регистрирую возвращаемое значение getBoundingClientRect() для каждого div. Проблема в том, что, несмотря на то, что каждый div имеет уникальную позицию относительно следующего, одни и те же данные возвращаются каждый раз. Это как если бы я восемь раз получал данные getBoundingClientRect() для одного и того же div. Что дает?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
221
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Самая основная проблема в вашем случае заключается в том, что для создания массива ссылок вы используете метод Array.fill, который инициализирует все значения в массиве с той же ссылкой, что и React.createRef, и, следовательно, когда вы пытаетесь использовать assign refs в div, все свойства ref будут ссылаться на последний div, которому назначен экземпляр ref

Простой способ исправить это - использовать карту вместо заливки, например

constructor(props) {
    super(props);
    this.refArray = Array.apply(null, { length: props.number.length}).map(() => React.createRef());
  }

Рабочая демонстрация

Бесконечно благодарен! Совершенно неправильно понял механизм, лежащий в основе Array.fill.

staletidings 26.10.2018 10:11

Рад, что помогли :-). Бывает вообще. Заливку следует использовать для инициализации массивов неизменяемыми значениями, такими как числа, строки, логические и неизменяемые значения, такие как массивы и объекты.

Shubham Khatri 26.10.2018 10:13

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