javascript - 如果我需要 react 虚拟化，如何在 DOM 中呈现整个网格？

Question

我正在构建一个 React 应用程序，我有多个 Grid 组件，结合了 ScrollSync，如下所示:

<ScrollSync>
...
   <Grid />
   <Grid />
...
</ScrollSync>

看起来像这样:

它们滚动正确，一个跟随另一个。但是，我需要 GRID 1 始终在 DOM 中完全呈现。

Grid 的 overscanRowCount 选项没有帮助，因为它只给我 n 行数，但仅限于滚动方向。

例如，如果我渲染了 10 行，并且我已将 overscanRowCount 设置为 6 - 如果我向下滚动，我将有 10 + 底部 6 行，如果我滚动到顶部，我将有 10 + 6 个顶行。

为什么我需要它？我的应用程序如下所示:

因此，例如，当“prod5”项目离开 DOM 时，那条蓝线也会丢失，每一行都从行项目到顶部。

对我来说不错的选择是呈现 n 个顶部和底部行，或者简单地呈现所有这些行。任何解决方案或解决方法？我搜索了很多，找不到任何有用的东西。

Answer 1

我不是 react-virtualized 方面的专家，但似乎定义自定义 overscanIndicesGetter 函数可能是最简单的解决方案。每the docs :

overscanIndicesGetter

This is an advanced property. This function is responsible for calculating the number of cells to overscan before and after a specified range. By default, React Virtualized optimizes the number of cells to overscan based on scroll direction. If you'd like to customize this behavior, you may want to fork the defaultOverscanIndicesGetter function.

在下面的代码片段中，我定义了一个函数，它始终返回 0 的 overscanStartIndex 和等于最后一个索引的 overscanStopIndex:

const overscanIndicesGetter = ({cellCount}) => ({
  overscanStartIndex: 0,
  overscanStopIndex: cellCount - 1,
});

看看您的开发者工具，您会发现它确实渲染了所有 1,000 个单元格。

const { Grid } = window.ReactVirtualized;

const data = Array.from(new Array(1000)).map((_, i) => i);

const Cell = ({key, rowIndex, style}) =>
  <div key={key} style={style}>{data[rowIndex]}</div>;

const overscanIndicesGetter = ({cellCount}) => ({
  overscanStartIndex: 0,
  overscanStopIndex: cellCount - 1,
});

const App = ({data}) => (
  <Grid
    cellRenderer={Cell}
    columnCount={1}
    columnWidth={100}
    rowCount={data.length}
    rowHeight={30}
    height={300}
    width={300}
    overscanIndicesGetter={overscanIndicesGetter}
  />
);

ReactDOM.render(<App data={data}/>, document.querySelector('div'));

<link rel="stylesheet" src="https://unpkg.com/react-virtualized@9.2.2/styles.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized@9.2.2/dist/umd/react-virtualized.js"></script>
<div></div>

如果您愿意，可以尝试让它变得更智能。例如，如果您能够根据可见单元格的索引计算下一个“prod”单元格(即确定可见单元格是否具有蓝线的单元格)的索引，则可以将函数修改为返回 overscanStopIndex 的索引。 built-in defaultOverscanIndicesGetter function记录您的函数将接收的所有值。

/**
 * Calculates the number of cells to overscan before and after a specified range.
 * This function ensures that overscanning doesn't exceed the available cells.
 *
 * @param cellCount Number of rows or columns in the current axis
 * @param scrollDirection One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD
 * @param overscanCellsCount Maximum number of cells to over-render in either direction
 * @param startIndex Begin of range of visible cells
 * @param stopIndex End of range of visible cells
 */

如果您有大量数据，那么花时间看看您可以用这些数据做什么可能是非常值得的。