时间戳

首页 > 解决方案 > 使用 List 滚动到第一个元素，AutoSizer 不起作用

reactjs - 使用 List 滚动到第一个元素，AutoSizer 不起作用

问题描述

当用户单击分页按钮时，我想向上滚动到列表中的第一个元素。到目前为止，我遇到了 scrollToRow 和 scrollToIndex ，它们都没有工作。

这是我当前的代码：

<AutoSizer disableWidth>
{({ height }) => (
    <div>
        <List
            ref="list"
            height={height}
            rowCount={this.state.items.length}
            rowHeight={115}
            rowRenderer={this._rowRenderer}
            width={1}
            scrollToRow={0}
            containerStyle={{
                width: '100%',
                maxWidth: '100%',
            }}
            style={{
                width: '100%',
                marginBottom: '10px',
            }}
        />
    </div>
)}
</AutoSizer>

标签： reactjsreact-virtualized

解决方案

稍微想了想，发现不用再用 react-virtualized 包了。由于我重构了列表以使用 SSR 分页一次显示 24 个项目。所以，这是一个矫枉过正。

无论如何，我只是重用了相同的 _rowRenderer() 函数将项目映射到列表中。为了实现滚动行为，我刚刚添加了“溢出：滚动”的样式属性。就这样。

推荐阅读