在react-virtualized列表中使用可折叠面板

Question

我已经设法呈现了一个传递了react-bootstrap Panels数组的react-virtulized List。我测量了我的每一行，并且通过子回调，每次单击子面板时，父状态中的一个属性都会更新。所述属性在react-virtualized List rowHeight()函数中使用，top检查该面板当前是否展开。然后，使用指向我的List的ref，对所述ref调用recomputeRowHeights(index)和forceUpdateGrid()方法。

问题是，虽然List组件正确地更新了行的高度和位置，但动画并不流畅。我的意思是，bootstrap扩展动画运行良好，但扩展行的高度在单击事件之后立即发生变化，然后动画开始，感觉有点杂乱。

我想知道是否有解决这个问题的方法，或者这是否是react-virtualized的works特性中即将/计划/的。

提前谢谢！

Answer 1

不幸的是，我没有花太多时间在react-virtualized中处理或优化调整动画大小。在你提到的情况下，调整大小/重新定位有点不稳定，这并不让我感到惊讶。

这里有一个可以添加动画的快速示例:plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=预览。并不意味着没有bug，这只是一个例证。:D