3

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

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

它看起来像这样：

在此处输入图像描述

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

Grid 的overscanRowCount选项没有帮助，因为它只给了我 n 行，但只在滚动方向上。

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

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

在此处输入图像描述

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

对我来说，一个好的选择是渲染 n 顶行和底行，或者简单地 - 全部渲染。任何解决方案或解决方法？我搜索了很多，找不到任何有用的东西。

4

1 回答 1

3

我不是反应虚拟化方面的专家，但似乎定义自定义overscanIndicesGetter函数可能是最简单的解决方案。根据文档：

overscanIndicesGetter

这是高级属性。该函数负责计算指定范围前后过扫描的单元格数。默认情况下，React Virtualized 根据滚动方向优化过扫描单元的数量。如果您想自定义此行为，您可能需要分叉该 defaultOverscanIndicesGetter 功能。

在下面的代码片段中，我定义了一个始终返回overscanStartIndex0 且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。内置defaultOverscanIndicesGetter函数记录了您的函数将收到的所有值。

/**
 * 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
 */

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

于 2017-03-13T16:46:04.523 回答