时间戳

首页 > 解决方案 > 渲染前如何在 React 中查找和修改 DOM 节点？

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

问题描述

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

你能给我导航吗？

标签： reactjslazy-loadingreact-dom

解决方案

停止思考 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>

推荐阅读