问题标签 [react-virtualized]

我已经设法渲染了一个react-virtulized List我传递给它的数组react-bootstrap Panels。我已经测量了我的每一行，并且通过子回调，每次单击其中一个子面板时，都会更新父状态中的属性。所述属性用于react-virtualized List rowHeight()函数顶部检查该面板当前是否展开。然后，使用refto my List，我调用 said 上的recomputeRowHeights(index)andforceUpdateGrid()方法ref。

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

我想知道是否有任何解决方法，或者这是否是react-virtualized.

提前致谢！！

这是我的反应组件的cellSizeAndPositionGetter和render功能。当我调整屏幕大小时，我的屏幕布局没有改变，但我可以通过控制台确认widthand state.columnCount（由 使用cellSizeAndPositionGetter）正在改变。

是否可以在参数更改后触发Collection更新（即width）？ 还是我在这里做错了什么？

旁注： 宽度参数更改时react-virtualized List 会更新。

...

更新：（几个小时后）

我发现了一个非常笨拙的解决方法，可以react-virtualize Collection在宽度参数更改后进行更新。

当屏幕尺寸发生变化时，我会删除Collection显示元素（图像）列表中的最后一个元素。起初我尝试清除列表，但这会导致明显的视觉副作用。现在，在调整屏幕大小时，只有我显示器中的最终图像会奇怪地闪烁。

Collection但是在更改后进行更新仍然会很好width。:)

这是似乎欺骗Collection更新的代码。关键部分是setState我删除最后一个元素的第三行。

我正在尝试实现一个简单的数据表，如作者在此处的示例所示：示例

我试图将 ImmutableJS 列表作为属性传递，但无济于事。还有什么我在这里想念的吗？

如何将数据数组放入组件中？

呈现表格示例的父组件如下所示：

我还尝试更改从 this.context 链接到 this.props 的 TableExample 中 { list } 的所有声明，但没有取得多大成功。任何帮助将不胜感激。

此时 Chrome 返回的控制台错误：

如何在窗口滚动器中创建无限滚动列表？（与 Facebook 时间线相同 -模拟）？

下面是我尝试过的代码，但它没有按预期工作。它只显示第一个项目，之后不再显示任何内容。

提前谢谢了。

更新

这是演示的 URL：https ://plnkr.co/edit/akyEpZ0cXhfs2jtZgQmN

I'm trying to develop timeline component. This is stripped version of it to demonstrate issue:

https://jsfiddle.net/mauron85/5vverasn/

It should render 48 hour intervals between two dates (1/30/2007 - 1/31/2007) in table header and courier routes (rendered as cascade of squares), courier working hours and striped background in the table body.

My problem is that scrolling is only possible up to last courier route (3PM). There are no other routes, but I would like to enable scrolling to very last hour interval (11PM)

It's working when there is only one component in table body, but it's not when there more of them. In this case there is only stripe background.

Pseudo code:

this is working perfectly:

but scrolling is limited when multiple children in AutoSizer:

Comment out block: {/* when following commented scrolling works as expected */} in sample project to get expected scrolling behavior.

Not 100% sure where is the catch, but I believe it's because every child component Grid, Collection ... has its own ReactVirtualized__Collection__innerScrollContainer, which has different width and only very last in DOM tree is actually scrollable/visible. Playing with z-index of components confirms this.

我可以以某种方式实现 CellMeasurer 的功能来响应虚拟化表组件吗？

我想要动态列宽。

我想使用 react-virtualized 呈现项目列表，但是有些项目可能会改变大小。

我添加了一个演示，其中每个项目都有一个按钮，当有人单击该按钮时，该项目需要展开并将以下项目推低： https ://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii

用例类似于 facebook 帖子，当有人发表评论时，它将扩大帖子并将其他帖子推低。

有什么办法可以做到这一点？

更新

我意识到必须有一种方法可以强制List更新项目并重新计算位置。有一个带有InfiniteLoader（react-virtualized example）的示例，它registerChild在 List 中用作参考。似乎当 InfiniteLoader 从服务器接收到答案时，它能够强制列表重新渲染行。

我已经尝试了另一个forceUpdate关于列表的示例，但是列表仍然没有更新。

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

我正在使用'react-virtualized'来创建一个表。在该表中，一些数据可能显示为'<b>Brian Vaughn1</b>'. 这个表格单元格应该有font-weight: bold并且只应该呈现文本，没有标签。像这样：

我已经设法通过使用来解决这个问题ReactDOM.findDOMNode（据我所知应该避免），但我认为应该有一个更好、更清洁的方法来做到这一点。这是我的代码：

有任何想法吗？

我有一个<List />组件，我想在其中padding-top向wrapper添加一个首字母。由于所有元素都已absolute定位，我找到了这个解决方案，但我想知道它是否正确，或者是否有其他更便宜的解决方案：

}

相关部分是style道具。

我有一个 InfiniteLoader 包装一个 WindowScroller 包装一个 CellMeasurer 包装一个使用反应虚拟化的列表。我看到从渲染到渲染的每个列表项的高度不一致的行为。

我正在尝试将 resetMeasurements 传递给列表渲染组件，以清除每个新渲染上的缓存。我只是想确保我正确使用它。

我是否只是将函数作为道具传递给 List 渲染组件，然后在返回 List 之前在我的渲染函数中调用 resetMeasurements()？