在反应虚拟化列表中使用可折叠面板

Question

我成功渲染了一个

react-virtulized List

，并向其中传递了一组

react-bootstrap Panels

。我测量了每一行，并通过子回调，每次单击其中一个子面板时，父状态中的属性都会更新。所述属性在

react-virtualized List

rowHeight()

函数内部使用，顶部检查该面板当前是否已展开。然后，对我的

ref

使用

List

，我在所说的

recomputeRowHeights(index)

上调用

forceUpdateGrid()

和

ref

方法。

问题是，虽然列表组件正确更新了行的高度和位置，但动画并不流畅。我的意思是，引导展开动画效果很好，但是展开行的高度变化在单击事件之后立即发生，然后动画开始，感觉有点不稳定。

是否有任何解决方法，或者这是

react-virtualized

即将推出/计划中/正在开发的功能？

Answer 1

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

这是添加动画的一种简单示例：

plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview