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

Question

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

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

Answer 1

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

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

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

Рабочая демоверсия