Я хотел бы отобразить список элементов, используя virtual-virtualized, однако некоторые элементы могут изменить размер.Как уведомить компонент списка, что один элемент изменил размер?
Я добавил дем, где каждый элемент имеет кнопку, и когда кто-то нажимает на кнопку, то деталь необходимо расширить и нажмите пункты ниже ниже: https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii
Прецедент похож на facebook сообщения, когда кто-то замечает, что он расширит сообщение и подтолкнет другие сообщения ниже.
ReactDOM.render(
<List
className='List'
autoHeight
width={300}
height={400}
rowCount={list.length}
rowHeight={30}
rowRenderer={
({ index, isScrolling, key, style }) => (
<div
className='Row'
key={key}
style={style}
>
{list[index]}
<Expander /> /* contains the button, which when click it will expand more text*/
</div>
)
}
/>,
document.getElementById('example')
Можно ли достичь этого?
UPDATE
Я понял, что должен быть способ, чтобы заставить List обновить элементы и пересчитывать позиции. Существует пример с InfiniteLoader (react-virtualized example), который использует registerChild в Списке в качестве ссылки. И кажется, что когда InfiniteLoader получает ответ от сервера, он способен форсировать список для повторной рендеринга строк.
Я пробовал другой пример с forceUpdate в списке, однако Список по-прежнему не обновляется.
https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu
Вам нужно использовать метод List.recomputeRowHeights. https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#recomputerowheights-index-number –