在React Virtualized`Grid`中解释动态的top元素

Question

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

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

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

const adjustedTopOffset = style.top + heightOfTopElement;

上面的计算是针对每个元素完成的。这样可以将所有元素正确地放置在适当的偏移处。但是，网格的高度无法适应顶部偏移的重新计算。

结果是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,
  };
}