Как найти и изменить узлы DOM в React перед рендерингом?
Я не вижу правильного способа найти и изменить узлы React DOM перед рендерингом.
Например, мне нужно сделать все найденные изображения внутри компонента как ленивая загрузка. Но проблема в том, что я не знаю, какие узлы будут вставлены пользователем. Поэтому мне нужно искать их после того, как пользователь помещает узлы в компонент, используя componentWillMount или constructor, я думаю ...
На самом деле в jQuery, чтобы заменить реальный src после того, как пользователь вставил его. Я сделаю что-то вроде этого:
jQuery('.wrapper img').each(element => {
let realSrc = element.attr('src')
element
.attr('data-real-src', realSrc)
.attr('src', './fakeimage.png')
})
Я думаю, что в React я должен сделать что-то вроде этого ...
const modifiedChildren = children.reduce((arr, next) => {
let modified = {
...next,
src: './fakeimage.png',
'data-real-src': next.src
}
return [
...arr,
modified
]
}, [])
render {
<div className = "wrapper">{ modifiedChildren }</div>
}
Можете ли вы сориентировать меня, пожалуйста?
Ответы 1
Перестаньте думать в узлах DOM. Начните думать о компонентах.
Вам нужен новый компонент LazyLoadedImage, который получает реальный URL-адрес и отображает его после некоторого триггера. Что-то подобное:
import fakeImage from 'assets/fakeimage.png';
const LazyLoadedImage = ({url, displayActualImage, ...props}) => {
if (displayActualImage) return <img {...props} src = {url}>;
else return <img {...props} src = {fakeImage}>;
}
Пример использования:
<Slider>
{images.map((obj, index) =>
<LazyLoadedImage className='slider__img' url = {obj.largeImageURL}
alt = {obj.tags || 'cap'} key = {index}/>)}
</Slider>
Вам нужно показать больше информации. Обычно пользователь не может вставлять «узлы DOM» в приложение. Вам не нужно искать <img> в DOM. Если вы так думаете, значит, вы думаете в неверном направлении. Думайте о данных и компонентах, а НЕ об узлах DOM
Пользователь просто вставил его. Тогда я смогу работать только с массивом объектов this.props.children.
Смотрите обновление. Пользователи не вставляют теги <img>, они вводят URL-адреса, теги и т. д. Отойдите от узлов DOM!
Рекурсивный поиск и замена в массиве this.props.children кажется действительно сложной работой = (
Прекрати это. Ерунда. Прочтите и понять, что я пишу
Думаю, я тебя понимаю. Необходимо заставить пользователя использовать ленивую оболочку для изображений, если он хочет добиться эффекта ленивой загрузки. Кажется, это самый простой способ. Спасибо вам!
Но на самом деле я не мог найти правильный способ рекурсивного поиска <img> в DOM, опубликованном пользователем. Потому что он мог вставить другой DOM в компонент