如何在渲染前查找和修改 React 中的 DOM 个节点？

Question

我看不出如何在渲染前查找和修改 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>
}

你能帮我导航一下吗？

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>

如何在渲染前查找和修改 React 中的 DOM 个节点？

How to find and modify DOM nodes in the React before render?

reactjs

lazy-loading

react-dom