考虑 React Virtualized `Grid` 中的动态顶部元素

Question

我有一组使用 React Virtualized 的 Grid 元素的照片。

我们设计了一个在照片上传过程中显示的指示器。这会动态隐藏和显示，并通过 cellRangeRenderer per these docs.

呈现

棘手的部分是让其余的网格项目遵守这个新元素添加的额外高度。目前采用的方法是将该元素的高度添加到 cellRenderer 中呈现的每个元素的 style.top。

const adjustedTopOffset = style.top + heightOfTopElement;

上面的计算是针对每个元素进行的。这正确地将所有元素放置在适当的偏移处。但是，Grid 的高度不会为重新计算顶部偏移量而调整。

结果是 Grid 的底部被调整后的顶部数量切断。

如何正确计算调整后的最高偏移量？调用 recomputeGridSize 好像不行。

调整 cellRenderer 中的顶部偏移量是否是解决额外顶部元素的正确方法？我要澄清的是，这不是固定元素，而是需要像其他元素一样随 Grid 滚动的元素。

Answer 1

鉴于您的单元格高度是固定的，您应该能够 overrides the default height style 使用 containerStyle 属性，如下所示：

let containerStyle;
if (isTopElementVisible) {
  containerStyle = {
    height: rowHeight * rowCount + heightOfTopElement,
    maxHeight: rowHeight * rowCount + heightOfTopElement,
  };
}

考虑 React Virtualized `Grid` 中的动态顶部元素

Account for dynamic top element in React Virtualized `Grid`

javascript

reactjs

react-virtualized