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

Question

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

我们设计了一个在照片上传期间显示的指示器。这会动态隐藏和显示，并通过 cellRangeRenderer 每 these docs 呈现。

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

const adjustedTopOffset = style.top + heightOfTopElement;

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

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

如何正确计算调整后的顶部偏移量？调用recomputeGridSize 似乎不行。

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

Answer 1

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

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