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

【问题标题】：Append components to a fixed list using react-window?使用 react-window 将组件附加到固定列表？
【发布时间】：2019-12-21 11:02:23
【问题描述】：

我有一个使用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。确实，固定容器应该被认为是整个页面和搜索框，其他所有内容都应该随着无限列表滚动。拥有两个不同的滚动容器对于 ux 来说并不是太好。

【问题讨论】：

标签： reactjs react-window

【解决方案1】：

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

我为您的 codepen here 添加了一个基本的窗口滚动器和一些样式更改。

【讨论】：

【解决方案2】：

几个选项：

围绕自动调整器制作一个包装器，其中包含您的搜索框和自动调整器。

<>
  <SearchBox />
  <AutoSizer>
    ... your items
  </AutoSizer>
</>

让 AutoSizer 同时包含搜索和列表

<AutoSizer>
  <SearchBox />
  <List>
    ... your items
  </List>
</AutoSizer>

由于您的无限滚动使用的是渲染功能，您可能需要片段

<AutoSizer>
  <InfiniteScroll>
    {({ onItemsRendered, ref }) => (
      <>
        <SearchBox />
        <List>
          ... your items
        </List>
      <>
    )}
  </InfiniteScroll>
</AutoSizer>

我在这里edited your example 并使用这种方法使其工作。

请注意，页面滚动只是因为顶部和底部栏；这是您示例中的行为。

让无限加载器填充一个数组，并在其中附加一个额外的项。该项目可以具有某种类型。假设 FixedSizeList 是来自 react-virtualized 的 List 组件，那么您可以使用它的 rowRenderer 以不同于其他项目的方式呈现“搜索”类型的项目。比如：

function rowRenderer ({ key, type, value, ...rest }) {
  if (type === 'search') {
    return <Search key={key} placeholder={value} {...rest} />
  } 

  return <div key={key} {...rest}>{value}</div>
}

// Render your list
ReactDOM.render(
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={width}
      />
    )}
  </AutoSizer>,
  document.getElementById('example')
);

也许看看 Vaughn 的简单 example 也有帮助。

【讨论】：