在渲染之前找到反应组件或图像的大小

Question

我有一个不同尺寸的图片列表。

images = ['https://example.com/1.jpg','https://example.com/2.jpg', ... ]

我想在渲染它们之前获取它们的高度数组。然后，我将只根据 scrollHeight 渲染应该在视口中的图像。例如使用 React Infinte

我可以在 React 组件之外轻松做到这一点

let imgHeights =  images.map(imgUrl => {
    var img  = new Image()
    img.src = imgUrl
    return img.height;
})

但是 new image() 在 React 中不起作用，因为它依赖于 DOM。

我的 React 组件渲染方法如下所示。

var ImageList = (images) => {
     let buildImageList = images.map(imgUrl => {
         return <img src= {imgUrl}></img>
     })

     let imgHeights = images.map(imgUrl => {
         let img = new Image()
         img.src = imgUrl
         return img.height //this doesn't work 
     })

     return (
         <Infinte elemetHeight = {imgHeights} onInfiniteLoad ={buildImageList} />
     ) 
}

如何获取图像高度？我应该使用 ReactDOM 在临时 div 中渲染图像吗？

Answer 1

图片是在javascript继续执行的同时异步下载的，因此您需要等待它们加载以记录它们的高度。您可以等待他们的 onload 活动并执行类似

的操作

 let imgHeights = {};
 images.forEach(imgUrl => {
     let img = new Image();
     img.src = imgUrl;
     img.onload = () => imgHeights[imgUrl] = img.height;
 })

这只是让你开始；您仍然需要弄清楚如何在它们准备就绪时渲染它们。

在渲染之前找到反应组件或图像的大小

find size of react component or image before rendering

reactjs

react-dom