1
배열의 숫자를 나열하고자하는 구성 요소가 있습니다. 나는이 예에서와 같이 가상화 된 무한 스크롤 반응하는 구현하는 시도 : https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#user-content-infiniteloader-and-list실제 가상화 된 무한 스크롤이 올바르게 렌더링되지 않습니다.
내가 가까이 솔루션에서 오전하지만 코드가 작동하지 않는 이유를 알아낼 수 있다고 생각합니다. 너 나 좀 도와 줄 수있어? 여기 내 실제 구성 요소는 스크롤에 의해 빠른 이동 (내가 스크롤하면
import * as React from 'react';
const dataTest = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
export class EventsViewController extends React.Component {
constructor(props) {
super(props);
this.state = {
threshold: 10,
actualData: []
};
this.rowRenderer = this.rowRenderer.bind(this);
this.isRowLoaded = this.isRowLoaded.bind(this);
this.loadMoreRows = this.loadMoreRows.bind(this);
}
public isRowLoaded(param: any) {
return !!this.state.actualData[param.index];
}
public loadMoreRows(param: any) {
const startIndex = param.startIndex;
const stopIndex = param.stopIndex;
const dataLoaded = [];
for (let i = startIndex; i < stopIndex; i++) {
dataLoaded[i] = dataTest[i];
}
this.setState({
actualData: dataLoaded
});
}
public componentWillMount() {
const dataLoaded] = [];
for (let i = 0; i < this.state.threshold; i++) {
dataLoaded[i] = dataTest[i];
}
this.setState({
actualData: dataLoaded
});
}
public rowRenderer(param: any) {
const list = this.state.actualData;
const index = param.index;
return (
<div
key={param.key}
>
{list[index]}
</div>
);
}
public render() {
return (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.loadMoreRows}
rowCount={this.state.actualData.length}
>
{({ onRowsRendered, registerChild }) => (
<List
height={250}
onRowsRendered={onRowsRendered}
ref={registerChild}
rowCount={this.state.actualData.length}
rowHeight={50}
rowRenderer={this.rowRenderer}
width={300}
/>
)}
</InfiniteLoader>
);
}
}이 loadMoreRows 기능이 무기한이라고 디스플레이 "깜박"(나는 가능한 한 많이 청소하려고) 자체에서 수직으로). 당신의 도움에 대한
덕분에 ...