一旦前一个图像完全完成加载后，就开始加载下一个图像

Question

更新的代码和问题

this.state.imageUrls.map((ImageUrl, index)=> {
return (<div>
    <img onLoad={this.imageLoaded} src={ImageUrl} className= 
    {this.state.galleryContent}/>
    </div>
    )})

imageLoaded = (event) => {
        this.setState({galleryContent: 'gallery-content-loaded'});
    }

我想做的是通过一系列图像进行映射。加载一个后，调用一个函数，该函数会淡入该图像（更新className），然后与所有其他图像一一对应。所以现在的问题是，一旦加载了一个图像，我就在更改galleryContent的数据，等到下一次迭代开始时，我需要将其重新设置为“ gallery-content-loading”。最好的方法是什么？

Answer 1

我不清楚您到底是什么意思。我看到您正在提供imageLoaded作为onLoad事件。如果要生成数组并在其元素上执行函数，则最好使用forEach来声明另一个变量，然后在forEach的每次迭代中将预期的div附加到该数组上。返回等效的映射元素后，map将不会为您提供任何回调以在元素上执行另一个函数。