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

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

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

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

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