0
我正在写一个小的助焊剂/反应应用程序,将在画廊中显示图像。我在Flux商店中有一个计时器,每隔30秒从Web服务中提取新图像,并将它们添加到商店的列表中,然后发出更改,以便视图可以渲染新照片。助焊剂/反应设计模式
我有所有这些工作,但现在我想弄清楚如何添加一些CSS专门添加最新的图像,但我不知道什么是最好的方式是沟通从商店的角度看,没有它变得十分肮脏......
我正在写一个小的助焊剂/反应应用程序,将在画廊中显示图像。我在Flux商店中有一个计时器,每隔30秒从Web服务中提取新图像,并将它们添加到商店的列表中,然后发出更改,以便视图可以渲染新照片。助焊剂/反应设计模式
我有所有这些工作,但现在我想弄清楚如何添加一些CSS专门添加最新的图像,但我不知道什么是最好的方式是沟通从商店的角度看,没有它变得十分肮脏......
当店铺发送更新消息时,您可以跟踪更改。
store.addChangeEventListener((images) => {
var last = this.state.newImageUrls || {};
var now = {};
images.forEach(function(img){
if(!last[img.src]) now[img.src] = true;
});
this.setState({newImageUrls: now, images: images});
});
而在渲染你检查一个给定的图像SRC是新的:
var newImages = this.state.newImageUrls;
...
images.map(function(x, i){
return <img src={x.src} className={newImages[x.src] ? "new" : ""} />
});