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

Question

我有一个不同大小的图像列表.

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

---

我想在渲染之前得到一个高度数组.然后,我将仅基于scrollHeight渲染应该在视口中的图像.例如使用React Infinte

我可以轻松地做出反应组件之外的事情

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

但new image()由于它取决于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;
 })

那只是让你开始; 你仍然需要弄清楚如何在它们准备好时渲染它们.