reactjs - 使用react-window将组件附加到固定列表？

Question

我有一个固定的列表和网格，使用 react-window , infinite loader ，和auto sizer 。它工作正常，但我希望在列表/网格启动之前附加一个组件(例如，搜索框和按钮)。实现这一目标的正确方法是什么？我希望这个组件与固定列表一起滚动，而不是单独滚动。我之前只是渲染组件已经很累了，但后来它不在固定列表容器中，也不会随之滚动。

{/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
{/* CAN'T IN HERE BECAUSE ITS NOT INSIDE THE FIXED CONTAINER SO IT SCROllS SEPARATELY */}
<AutoSizer>
    {({ height, width }) => (
        <InfiniteLoader
            isItemLoaded={index => index < stateData.data.length}
            itemCount={stateData.data.length + 1}
            loadMoreItems={loadMoreProducts}
        >
            {({ onItemsRendered, ref }) => (
                <FixedSizeList
                    onItemsRendered={onItemsRendered}
                    ref={ref}
                    height={height}
                    itemCount={stateData.data.length + 1}
                    itemSize={350}
                    width={width}
                >
                    {/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
                    {/* CAN'T IN HERE BECAUSE ITS LOOPING LISTITEM */}
                    {ListItem}
                </FixedSizeList>
            )}
        </InfiniteLoader>
    )}
</AutoSizer>

编辑:我几乎不希望列表(或网格)和实际页面成为两个不同的滚动容器。我希望整个页面一起滚动。我遇到过这个问题，因为我的一些容器需要有用户可以滚动的无限项目列表，因此需要虚拟化该列表以提高性能。

查看演示 here 。实际上，固定容器应该被视为整个页面和搜索框，其他所有内容都应该随着无限列表滚动。拥有两个不同的滚动容器对于用户体验来说并不是太好。

Answer 1

如果您希望整个页面与虚拟列表一起滚动，您将需要一个窗口滚动器。这还涉及到尝试一些样式。要使搜索框随列表滚动，您需要固定位置。间隔 div 和一些样式有助于产生幻觉。

我向您的 codepen 添加了一个基本的窗口滚动条和一些样式更改 here .