import React from 'react';
import LazyLoad from 'react-lazyloadcomponent-image';
import Scroll from 'react-handle-scroll';
...
renderItem() {
return this.state.banner.map((item, index) => <li key={ index }>
<LazyLoad>
<div>
{ index + 1 } <img height={200} data-src={ item } alt=""/>
</div>
</LazyLoad>
</li>);
}
onReachBottom(cb) {
this.loadData()
.then(cb);
}
onReachTop(cb) {
cb();
}
onScroll({ top, left }) {
}
render() {
return (
<div className={ 'container' }>
<Scroll onReachTop={ this.onReachTop } onScroll={ this.onScroll } onReachBottom={ this.onReachBottom }
className={ 'scroll-wrap' }
style={ { filter: 'brightness(90%)' } }>
<ul>
{ this.renderItem() }
</ul>
</Scroll>
</div>
);
}
...