问题标签 [react-virtualized]

我正在尝试添加 AutoSizer，但不断获得 0px 的高度和宽度。

我像这样添加 AutoSizer：

生成的html：

日志给了我：

宽度：400 高度：200

如果我在浏览器中编辑 0px 框的 html 并滚动我的框，然后通过状态更改来增加它的高度，则不会发生任何事情。即使将新的高度值记录到控制台，它也会保持手动修改的大小。

我正在尝试向使用该<Grid>组件的网站添加网站标题。如何嵌套网站标题以避免获取浏览器滚动条和<Grid>滚动条？

我想将 Grid 向下推以允许网站标题，同时允许 Window / Browser 控制两者的滚动。

我正在使用这些组件 <WindowScroller><AutoSizer><Grid>

我在https://bvaughn.github.io/react-virtualized/上看到它正常工作的 WindowScroller（使用该VirtualScroll组件）。

我正在使用Grid组件，react-virulized并且需要在列单元格和行级别处理单击事件。我尝试将 onClick 添加到div我的 cellRenderer 方法返回的值，但它似乎不起作用。有没有人有这个工作？见下文：

谢谢！

我想使用React Virtualized Select在选择下拉列表中显示近 100 万条记录。我已经创建了基于flask和angularjs的项目。我无法通过 angularjs 找到此类下拉列表的任何资源，因此我决定使用 react.js 和 angular.js 来获取此选择下拉列表。

来到我的问题，请在下面找到我到目前为止尝试过的代码。由于我没有使用 nodeJS，我不能使用“require”或“include”，它们在这些下拉菜单中起主要作用，但幸运的是他们为“react-virtualized-select”提供了 UMD javascript 文件，所以我最后包含了这些脚本的 HTML 正文，但是当我运行代码时，我在控制台中收到错误

嵌入式：20 未捕获的 ReferenceError：未定义 VirtualizedSelect

有人可以告诉我我是否以正确的方式实施反应，或者我对 UMD 文件的理解有误吗？提前致谢。

更新：我创建了一个突出问题的 JS Fiddle，我还根据 SO 的评论对代码进行了一些更改。

JSFiddle Demo

scrollToColumn将保证 Grid 的列是可见的。如何渲染它以使其在网格中居中？

我有点不确定如何使用react-virtualized来实现 List 的动态高度。

我有一个组件如下：

我已经按照文档查看了使用CellMeasurer，该文档说它可以与 List 组件一起使用，但我不知道这个示例实际上是如何工作的......

我也试图弄清楚它是如何在演示代码中实现的，但也走到了死胡同。

有人可以帮助我如何测量 DOM 以动态获取每个项目的高度。

当我继承/子类化“列”组件时，它会抛出Warning: Failed prop type: Table only accepts children of type Column

这就是我分类的方式Column

它工作得很好，但我怎样才能避免这个警告呢？

我几乎一整天都在调整 VirtualScroll (List) 组件，但没有运气。

我正在构建一个基于 web 的聊天应用程序，其中使用 react-virtualized List 来显示聊天消息。由于消息可能有不同的内容和不同的高度，我使用react-measure计算项目高度并在 rowRenderer 中发出recomputeRowHeights 。

结果很糟糕，每当我停止滚动时，VirtuallScroll List 都会跳来跳去。例如，当我滚动到浏览器的一半时，我应该看到消息的中间，但它总是突然移动偏移量。请看一下录制的视频： https ://drive.google.com/file/d/0B_W64UoqloIkcm9oQ08xS09Zc1k/view?usp=sharing

由于我只使用 List 和 Autosizer 组件，所以我只将所需的 css 文件调整到我的项目中，就像 ```

```

对于 render 方法，我在 rowRender 中嵌套了很多 flex 组件： 下面是代码：

```

```

我读了几个文档说 Flexbox 可能会拦截滚动事件，但即使我添加了overflow-y: hidden到嵌套组件，我也没有看到问题消失。你以前见过这种错误的 List 组件滚动行为吗？

欢迎任何建议。

react-virtualized的List 组件提供了一个属性，可以滚动到当前不可见的列表项。scrollToIndex

官方树示例构建了一个分层列表，其中包含分层堆叠的 ul 元素 - 正如预期的那样。

因此，如果索引 x 被滚动到，则该行包含驻留在此特定树元素下的整个层次结构。

就我而言，一级元素很少。但在第 3 级中，最多有 600 个元素。因此，能够将级别 3 的元素滚动到视图中是很重要的。

遗憾的scrollToIndex是不能用于此，因为所有这 600 个元素都包含在同一个顶级索引中。

我能想象到的唯一方法是分层创建整个反应虚拟化列表组件而不是 ul 元素。然后为了将元素滚动到视图scrollToIndex中，将在每个层次结构级别上从上到下调用​​。

不知何故，我觉得必须有一种更简单/更可行的方法来做到这一点。

有任何想法吗？

更新：我有这个想法：

• 构建一个函数，计算层次树中活动节点上方的行数
• 乘以行高
• 将此应用于scrolltop组件List中

唯一的问题是：未应用滚动顶部:-(

这是我正在处理的组件。

使用browserify（commonjs），如何最小化react-virtualized的大小？它似乎包括我不使用的其他类，如 Collection 和 Table。我尝试过使用标准语法import {foo, bar}...以及单独指定每个类import {WindowScroller} from 'react-virtualized/dist/commonjs/WindowScroller'。然而，RV 似乎仍在占用约 90k：

谢谢！