Как я могу динамически рассчитать высоту строки по индексу строки для VariableSizeList?

Question

Мне нужно сделать длинный список через библиотеку реагирующих окон. Я не могу быть уверен, что все строки будут одинакового размера, поэтому я вынужден использовать VariableSizeList. Так есть ли способ рассчитать высоту строки, когда вы знаете только индекс строки и фактические данные, которые будут отображаться?

Я думаю, что возможно сделать это как-то невидимым для конечного пользователя и получить высоту, но я не уверен, что это правильный путь.

Answer 1

Да при использовании VariableSizeList указать itemSize функция.

например

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

OnGetItemSize измеряет контент по:

1. возвращает единственную высоту строки, если содержимое мало.
2. запись содержимого в пустой элемент с той же шириной и свойствами, что и ваша строка. Затем измерьте высоту элемента, прежде чем снова опорожнить элемент.

Например:

 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' }} />