Question

我需要通过react-window库呈现长长的列表。我不能确定所有行的大小都一样，因此迫使我使用VariableSizeList。那么，当您仅知道行的索引和要呈现的实际数据时，有没有一种计算行高的方法？

我认为有可能以某种方式将其呈现给最终用户不可见并获得高度，但我不确定这是正确的方法。

Answer 1

使用VariableSizeList时，请指定itemSize函数。

例如

itemSize = {(i) => onGetItemSize(rows[i])}

onGetItemSize通过以下方式测量内容：

如果内容很小，则返回单行高度。
将内容写入具有与行相同的宽度和属性的空元素。然后测量元素高度，然后再次清空元素。

例如：

 onGetItemSize={((row) =>
                {
                let text = row.original.text;
                // if no text, or text is short, don't bother measuring.
                if (!text || text.length < 15)
                    return rowHeight;

                // attempt to measure height by writting text to a, kind of hidden element.
                let hiddenElement = document.getElementById(this.hiddenFieldName());
                if (hiddenElement)
                {
                    hiddenElement.textContent = text;
                    let ret = hiddenElement.offsetHeight;
                    hiddenElement.textContent = '';

                    if (ret > 0)
                        return Math.max(ret, rowHeight);
                }

                // fallback
                return rowHeight;
            })}

然后在DOM中的适当位置包含此空元素。

<div id={this.hiddenFieldName()} style={{ visibility: 'visible', whiteSpace: 'normal' }} />

如何为VariableSizeList按行索引动态计算行高？

1 个答案: