Песочница: https://codesandbox.io/s/8292lmypz2
Я пытаюсь измерить абсолютное положение некоторых div
. Я обращаюсь к узлу DOM div
через перенаправленный ref
(React.forwardRef()
) в интересующий меня div. В конструкторе моего родительского компонента я заполняю массив с React.createRef()
, которые затем назначаю каждому div. ref итеративно по мере их рендеринга. Наконец, я регистрирую возвращаемое значение getBoundingClientRect()
для каждого div. Проблема в том, что, несмотря на то, что каждый div имеет уникальную позицию относительно следующего, одни и те же данные возвращаются каждый раз. Это как если бы я восемь раз получал данные getBoundingClientRect()
для одного и того же div. Что дает?
Самая основная проблема в вашем случае заключается в том, что для создания массива ссылок вы используете метод 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
.