HTML Длина коллекции равна 0 даже после рендеринга DOM - PullRequest
Новая
       4

HTML Длина коллекции равна 0 даже после рендеринга DOM

1 голос
/ 09 марта 2020

Я работаю над приложением SSR React-based, используя NextJS. После визуализации DOM мне нужно определить набор элементов видимости в области просмотра, и как только они будут видны, мне нужно что-то сделать. Теперь для достижения sh того, что мне нужна ссылка на тот набор элементов, который я использую в componentDidMount методе жизненного цикла, понимая, что, поскольку DOM полностью визуализирован, я могу собрать все элементы вместе и посмотреть их, если они в окне просмотра или нет.

Ниже приведен код для получения ссылки на набор элементов: 

componentDidMount() {

    this.imageContainer = document.getElementsByClassName("prod_images");
    console.log('imageContainer -> ', this.imageContainer, 'length ->', 
    this.imageContainer.length, 'type is -> ', typeof this.imageContainer);
}

Итак, я получаю HTMLCollection набора изображений, которые хранятся в переменной imageContainer. Я сделал консоль ниже, и я получаю ниже в консоли:

enter image description here

В приведенном выше SS, я только показал 4 записи из HTML Объект коллекции но я все 141 правильно получаю. Моя проблема в том, что я получаю this.imageContainer.length как 0 в консоли, хотя значения присутствуют. Я использую this.imageContainer.length, позже, чтобы l oop через элементы, и в это время значение равно 0.

Ссылка -> Javascript HTML коллекция показывается как 0 длина объясняет тот факт, что это может быть связано с тем, что элементы DOM не загружаются к этому времени, и мы должны выполнить эту проверку в DOMContentLoaded. Но я уже использую метод жизненного цикла componentDidMount. Так в чем же проблема и почему длина равна 0. Нужно ли что-то делать с SSR?

...