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" : ""} />
});