React Virtualized — по щелчку, разверните строки для получения дополнительных сведений

У меня есть требование открыть/закрыть дополнительные сведения о строке.

Кто-нибудь реализовал или есть идеи о том, как реализовать функцию развертывания/свертывания для каждой строки?


reactjs react-virtualized
person Q-Ball    schedule 12.12.2016    source источник
comment
Я пытаюсь сделать то же самое. Как вы это настроили? Вы использовали библиотеку аккордеона?   -  person texas697    schedule 27.03.2017

Ответы (3)


arrow_upward
24
arrow_downward

Для такого рода вещей существует своего рода шаблон (демонстрация, источник) Важно то, что вам понадобится чтобы сообщить вашему List/Grid/независимо от того, когда открытие/закрытие изменилось (например, когда размер мог измениться), например:

this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size
this._listRef.forceUpdateGrid() // Rerender list with new size
person bvaughn    schedule 12.12.2016
comment
Спасибо, я смог заставить это работать, настроив файл RowRenderer и вашу демонстрацию и предложения. Очень признателен! - person Q-Ball; 16.12.2016
comment
@brianvaughn Спасибо за ответ, но я не могу реализовать это решение в Virtualized Grid, у Grid нет метода recomputeRowHeights - person Riskey Key; 22.01.2018
comment
Пожалуйста, прочтите документацию. Grid определяет аналогичный метод с именем cellRangeRenderer. github.com/bvaughn/react-virtualized/blob/master/ документы/Grid.md - person bvaughn; 22.01.2018
comment
возрождаю эту старую тему. @bvaughn, если я правильно понимаю, приведенный вами пример не поддерживает виртуализацию для вложенных элементов, верно? Я имею в виду, что если есть много подэлементов, то все они будут добавлены в DOM, если родительский элемент виден. Есть ли лучший подход для поддержки виртуализации и в подпунктах? - person Mike Yermolayev; 27.11.2019

arrow_upward
8
arrow_downward

Чего это стоит... :-)

пример CodeSandbox

person Yoeri    schedule 12.03.2019

arrow_upward
5
arrow_downward

Я искал ту же функцию, но не нашел полезных результатов при поиске, возможно, эта песочница поможет другим найти аналогичную функцию в своих приложениях:

В примере используется Table из react-virtualized рядом с react hooks.

Пример

person Naeem Baghi    schedule 24.03.2019
comment
Огромная помощь здесь ... вы спасаете жизни! - person Jordan Lee; 12.02.2020