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节点？

1 个答案: