Как найти и изменить DOM-узлы в React перед рендерингом?

Question

Не знаю, как найти и изменить узлы React DOM перед рендерингом.Например, мне нужно сделать все найденные изображения внутри компонента как lazy load .Но проблема в том, что я не знаю, какие узлы будут вставлены пользователем.Поэтому мне нужно искать их после того, как пользователь помещает узлы в компонент, используя componentWillMount или constructor я думаю ...

На самом деле в jQuery, чтобы заменить реальный src после того, как пользователь вставил его вЯ сделаю что-то вроде этого:

jQuery('.wrapper img').each(element => {
    let realSrc = element.attr('src')
    element
        .attr('data-real-src', realSrc)
        .attr('src', './fakeimage.png')
})

Так что в Реакте я должен сделать что-то подобное, я думаю ...

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>
}

Можете ли вы ориентироваться на меня, пожалуйста?

Answer 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>