加了自动翻页和给当前浏览照片换个样式。
PhotoItem.js
render(){
const {photoItem} = this.state.photoItem;
return (
<div className="photoMain">
<div>total:{this.state.total},current:{this.state.current}
,startIndex:{this.state.startIndex},endIndex:{this.state.endIndex}</div>
<div className="photo-detail">
<ul>
<li onClick={this.handlePrePhoto.bind(this)}>
<p>⟸</p>
</li>
<li>
<img src={this.state.showUrl} alt={this.state.showUrl}></img>
</li>
<li onClick={this.handleNextPhoto.bind(this)} >
<p>⟹</p>
</li>
</ul>
</div>
<div className="photo-list">
<ul>
<li onClick={this.handlePrePhoto.bind(this)} ><p>⟸</p></li>
{photoItem.map((item,index) => (
(index >this.state.startIndex) && (index <this.state.endIndex) ?
<li className={index===this.state.current ?"curLi":null} key={item.FileName} onClick={this.changePhoto.bind(this,index)}>
<img src={this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName} alt={item.FileName}/>
</li>:null
))}
<li onClick={this.handleNextPhoto.bind(this)} ><p>⟹</p></li>
</ul>
</div>
</div>
);
}