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

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

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