我正在使用react-virtualized来防止长列表中的项目在超出视图端口时被加载。但是,我在页面顶部有一个按钮,当单击该按钮时,将使用scrollsTo -virtualized呈现一个项目。 它使用React.createRef()来链接按钮和列表项,但是因为呈现的项在dom中不存在,所以ref是null (它适用于呈现的前几个项,但不适用于其余的项)。 例如,如果我单击按钮20,则会出现错误Cannot read properties of null (reading 'getBoundingClientRect') because the ref of the b
在跑步的时候变得意料之外。我正在尝试加载react虚拟化的InfiniteLoader。想知道如何通过这个组件调用API,如果有任何示例可用的话。我已经从获取了组件,我正在使用来自的示例
import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to
我目前正在使用react-virtualized来呈现巨大的列表。当我调整大小并达到某个宽度时,滚动条会无限消失并重新出现,即使计算出的宽度保持不变。这可能是react-virtualized库中的错误,但我正在尝试寻找解决方法。这是我现在在我的渲染方法中所拥有的: // The onResize is what I am currently focusing on
<AutoSizer disableHeight onResize={this.setDimensions}>
{({ width }) => {
return (
我已经安装了版本15.2.1的react、react-addons-shallow-compare和react-dom。当我尝试使用react-virtualized时,我在Chrome控制台上得到一个错误消息
external "React.addons.shallowCompare":1Uncaught ReferenceError: React is not defined
在没有使用react-virtualized的情况下,React运行良好。不确定为什么会出现此错误。
我正在尝试创建一个8列的表,每一列都包含<input />元素。由于某些原因,我在文本输入的on change事件中遇到延迟。将列数减少到4列以下会使体验更好。这可能有一定的意义,但我也尝试增加了列的数量,我发现对于10个或更多的列,体验再次变得很好。您可以查看我的超级简单的React应用程序,其中您可以动态更改columns - 的数量。
这是我的代码:
import React from 'react';
import { AutoSizer, Table, Column } from 'react-virtualized';
class Ap
我在类似下面的代码片段中使用React Virtualized。有几个项目是使用CellMeasurer呈现的。最后一项表示将加载更多项,并且不会正常呈现。此项目具有错误的位置/样式和与其关联的错误高度。我该如何解决这个问题呢?
如果你想使用它,这里有一个Plunkr:
var List = ReactVirtualized.List;
var CellMeasurer = ReactVirtualized.CellMeasurer;
var CellMeasurerCache = ReactVirtualized.CellMeasurerCache;
var cache = new C