javascript - 对于动态高度列表，scrollToRow 结果关闭

Question

首先，让我提供一些有关 React-virtualized 用例的背景知识。我将它与 react-pdf v2.0 beta 版本一起使用为了构建一个 pdf 查看器，可以更有效地处理显示/渲染具有大量页面的 pdf 文档。一个重要的要求是 pdf 查看器具有完全响应能力，并且可以处理页面高度可能不同的文档。

我已经成功地将这两个包结合起来(有一些与react-pdf相关的小问题)，但是有一些事情并不像我预期的那样工作。最值得注意的是，滚动到特定行(即页面)并不能很好地工作。举个例子，如果我尝试从页面索引 0 滚动到页面索引 81(大约是我的 152 页测试 pdf 的中间)，我最终会到达所需页面和下一页之间的中间位置。如果我尝试滚动到最后一页索引(第 151 页)，我最终会到达倒数第二页。

我使用 WindowScroller、AutoSizer、CellMeasurer 和 List 的组合来创建我的查看器(我省略了直接不重要的部分):

class Viewer extends Component {
    constructor(props) {
        super(props);

        this.state = {pdf: null, scale: 1.2};
        this._cache = new CellMeasurerCache({defaultHeight: 768, fixedWidth: true});
    }

    ...

    handleResize() {
        this._cache.clearAll();     // Reset the cached measurements for all cells
    }

    updatePageIndex(index) {
        this._cache.clearAll();
        this._list.scrollToRow(index);
    }

    rowRenderer({key, index, style, parent}) {
        return (
            <CellMeasurer cache={this._cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
                {
                    ({measure}) => (
                        <div style={style}>
                            <Page
                                onLoadSuccess={measure}
                                renderTextLayer={false}
                                pdf={this.state.pdf}
                                pageNumber={index + 1}
                                scale={this.state.scale} />
                        </div>
                    )
                }
            </CellMeasurer>
        );
    }

    render() {
        ...
        <Document
            file="./some_pdf_document.pdf"
            loading={<Loader />}
            error={this.renderError()}
            onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
        >
            <WindowScroller onResize={this.handleResize.bind(this)}>
                {
                    ({height, isScrolling, onChildScroll, scrollTop}) => (
                        <AutoSizer disableHeight>
                            {
                                ({width}) => (
                                    <List
                                        autoheight
                                        height={height}
                                        width={width}
                                        isScrolling={isScrolling}
                                        onScroll={onChildScroll}
                                        scrollToAlignment="start"
                                        scrollTop={scrollTop}
                                        overscanRowCount={5}
                                        rowCount={this.state.pdf.numPages}
                                        deferredMeasurementCache={this._cache}
                                        rowHeight={this._cache.rowHeight}
                                        rowRenderer={this.rowRenderer.bind(this)}
                                        style={{outline: 'none'}}
                                        ref={ref => this._list = ref} />
                                )
                            }
                        </AutoSizer>
                    )
                }
            </WindowScroller>
        </Document>
    }

}
...

我在 updatePageIndex() 中所做的操作正确还是仍然缺少某些内容？

Answer 1

我认为上面有一两个误解。首先，调用 cache.clearAll() 将删除所有测量值 - 需要 CellMeasurer 在下一次渲染时重新计算所有测量值。除非发生了一些变化，导致这些测量无效——(从你的描述来看，情况似乎并非如此)——那么你就不想这样做。仅当由于浏览器宽度调整大小等更改可能影响换行文本内容的高度等导致测量无效时，才应调用此方法。

其次，如果您确实需要调用cache.clearAll()，那么您也会想要调用list.recomputeRowHeights ()。 CellMeasurer 缓存测量(大小)，List 缓存位置(偏移)。这使得数据可以重新排序(例如排序)而无需重新测量。排序后，List 所需要做的就是重新计算其位置。

查看this code snippet来自Twitter-like demo app我用react-virtualized构建了一个示例来说明如何完成此操作。

如果上述信息不能帮助您解决问题，请在 CodeSandbox 或类似网站上留下评论和重现，我会查看。