В настоящее время я работаю над реализацией бесконечного загрузчика вместе с таблицей в реагирует на виртуализацию .
Когда я отлаживаю isRowLoaded с оператором console.log, я не могу понять когда он вызывается, так как индекс печатается больше, чем ожидалось, хотя фактические строки изначально в таблице равны 15.
Также не ясно, что следует передавать в качестве значения для строки Count в Infinite Loader
class InfiniteLoadingList extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.getTotalCount();
}
render() {
const {list} = this.props;
const isRowLoaded = ({index}) => {
console.log(index);
return index < list.length;
};
const loadMoreRows = this.props.isNextPageLoading ? () => {
} : this.props.loadNextPage;
return (
<If condition={this.props.list.length > 0}>
<div style={{marginTop: '10px'}}>
<InfiniteLoader
isRowLoaded={isRowLoaded}
loadMoreRows={loadMoreRows}
rowCount={100000}>
{({onRowsRendered, registerChild}) => (
<Table
width={1200}
height={300}
headerHeight={20}
rowHeight={30}
rowCount={this.props.list.length}
rowGetter={({index}) => this.props.list[index]}
ref={registerChild}
onRowsRendered={onRowsRendered}
headerStyle={{
backgroundColor: '#f9c000',
fontWeight: 'bold',
color: '#444443',
margin: '0',
padding: '20px'
}}
rowStyle={{
fontSize: '0.7em',
fontWeight: 'normal',
color: '#444443',
padding: '20px',
borderBottom: '1px solid whitesmoke'
}}
>
//code to render table
</Table>
)}
</InfiniteLoader>
</div>
</If>
);
}
}
function mapStateToProps(state) {
const {hasNextPage, isNextPageLoading, list, total} = state.infiniteLoadingListReducer;
return {
hasNextPage,
isNextPageLoading,
list,
total
};
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
{
loadNextPage: loadNextPage,
initiateLoadNextPage: initiateLoadNextPage,
terminateLoadNextPage: terminateLoadNextPage,
getTotalCount: getTotalCount
},
dispatch
);
};
export default connect(mapStateToProps, mapDispatchToProps)(InfiniteLoadingList);