В настоящее время я использую виртуализированную реакцию для отображения огромных списков. Когда я изменяю размер и достигаю определенной ширины, возникает точка, в которой полоса прокрутки бесконечно исчезает и появляется снова, даже если рассчитанная ширина остается прежней. Это может быть ошибка в библиотеке, виртуализированной на реагирование, но я пытаюсь найти способ ее обойти. Вот что у меня сейчас есть в моем методе рендеринга:
// The onResize is what I am currently focusing on
<AutoSizer disableHeight onResize={this.setDimensions}>
{({ width }) => {
return (
<div id={id} style={{ width: this.state.containerWidth }}>
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={handleInfiniteLoad}
rowCount={sheetsTotalCount} // all elements, not only the loaded
threshold={3} // starts loading the new data within 3 rows from the bottom
minimumBatchSize={3}
>
{({ onRowsRendered, registerChild }) => (
<WindowScroller scrollElement={scrollElement}>
{({ height, scrollTop }) => (
<List
autoHeight
height={height || defaultHeight}
ref={registerChild}
rowCount={this.state.numRows}
rowHeight={this.state.cardHeight + 2 * marginBetweenCards}
rowRenderer={this.rowRenderer} // renders the rows
scrollTop={scrollTop}
width={this.state.containerWidth}
onRowsRendered={onRowsRendered}
className="oh outline-none"
/>
)}
</WindowScroller>
)}
</InfiniteLoader>
{sheetsTotalCount > 0 &&
sheetsAreLoading &&
renderLoadingIndicator()}
</div>
);
}}
</AutoSizer>
При использовании свойства onResize я получаю бесконечную ошибку исчезновения / повторного появления, поскольку код пытается выполнить серию вычислений.
setDimensions = ({ width }) => {
const { sheetList } = this.props;
this.setState({
containerWidth: width > 0 ? width : defaultWidth
},() => {
this.setState({numCols: Math.max(Math.floor(this.state.containerWidth / baseThumbnailWidth), 1) }, () => {
this.setState({numRows: Math.ceil(sheetList.size / this.state.numCols)}, () => {
this.setState({cardWidth: Math.floor(this.state.containerWidth / this.state.numCols - 2 * marginBetweenCards)}, () => {
this.setState({cardHeight: Math.round(this.state.cardWidth * thumbnailProportion)});
});
});
});
});
}
Изменить: мне удалось решить свою проблему, уменьшив ширину определенных размеров окна. Я думаю, что это может быть проблема с реакцией-виртуализацией, и проблема, которая больше всего похожа на то, с чем я имел дело, была из проблемы, показанной на Wessel.
