Динамическое добавление контента в указанный дочерний элемент React в зависимости от высоты области просмотра
Я реализовал доказательство концепции, чтобы проиллюстрировать, чего я пытаюсь достичь https://codesandbox.io/s/html-react-parser-forked-wcxv8?file=/src/index.js
Я отображаю содержимое статьи, которое извлекается из API, но для простоты я использовал файл example.html. Мне нужно проанализировать его с помощью html-react-parser, потому что нам нужно выполнить некоторые преобразования перед его рендерингом, но я пропустил эту часть, поскольку она не имеет отношения к объему этой проблемы.
После того, как мы проанализировали и визуализировали его, я добавил эффект для вставки рекламного баннера с расстоянием, равным удвоенной высоте области просмотра. Как видите, будет вставлено 4 или 5 баннеров, в зависимости от высоты вашего окна просмотра, но это не то количество баннеров, которое следует вставлять, поскольку статья продолжается, а условия все еще применяются. Следовательно, мы должны увидеть больше баннеров.
Что я делаю не так? Спасибо!
Это имеет смысл, но чтобы сохранить состояние, мне нужно изменить массив статей, верно @szczocik? Это вызовет повторный рендеринг со вставленной рекламой.
Ответы 2
Проблема не в количестве объявлений, а в их позиции. В вашем массиве статей 116 элементов, а в ref.current.children всего 56.
Чтобы количество дочерних элементов соответствовало узлам статьи, вы можете обернуть каждый элемент массива статей в отдельный диапазон. Таким образом, количество статей и дочерних элементов будет одинаковым, что позволит равномерно распределять рекламу. Вы можете увидеть это здесь:
https://codesandbox.io/s/html-react-parser-forked-gvvmd?file=/src/index.js
Я вижу, это работает. Однако это нарушит доступность и семантику контента, верно? –
Я не уверен, но может быть так. Я думаю, что если это так, то решение @Scratch'N'Purr было бы лучше, поскольку оно очищает массив articles, а не отображает их все.
Похоже, что проанализированный HTML возвращает объект длиной 112, где индексы с нечетными номерами являются строковыми типами. Отфильтровав элементы, которые являются строками, и вставив их в index + viewPortDistance, вы получите правильные позиции вставки.
Я добавил операторы консоли, чтобы убедиться, что реклама действительно вставляется после правильных узлов.
Справедливости ради, похоже, что ваши расчеты правильны с точки зрения того, куда вставлять рекламу, но правильная вставка не работает. Вы можете видеть, что первое объявление должно было быть вставлено в индекс 10, но на самом деле было вставлено в индекс 5. Я думаю, что это может быть связано с тем, что вы перебираете узлы ref, но фактически изменяете сам массив статей.