标签: react-virtualized

我在使用自定义行渲染器处理React虚拟表（在AutoSizer内部的InfiniteLoader内部）时遇到了麻烦。标题行已呈现，但没有数据行。无论rowRenderer或者rowGetter甚至可以要求任何行。我检查了数据是否存在（this.props.requests）。

我缺少什么，或者如何进行调试？

<AutoSizer>
  {({ height, width }) => (
    <InfiniteLoader
      isRowLoaded={this.isRowLoaded}
      loadMoreRows={this.props.loadMoreEntries}
      rowCount={(this.props.requests || []).length}
    >
      {({ onRowsRendered, registerChild }) => (
        <Table
          deferredMeasurementCache={this._cache}
          onRowsRendered={onRowsRendered}
          overscanRowCount={2}
          ref={registerChild}
          height={height}
          headerHeight={50}
          rowCount={(this.props.requests || []).length}
          rowHeight={this._cache.rowHeight}
          rowRenderer={this._rowRenderer}
          rowGetter={this._rowGetter}
          onRowClick={this.rowClicked}
          width={width}
        >
          <Column
            dataKey="requestType"
            label="RqType"
            width={100}
            cellRenderer={this._renderRequestType}
          />
          ...
        </Table>
      )}
    </InfiniteLoader>
  )}
</AutoSizer>

我有一个基于demo编写的超级基本示例，但它不起作用：

import React from 'react';
import {
  Table,
  Column,
} from 'react-virtualized'

function MyTable(props) {
  return (
    <Table
      width={ 900 }
      height={ 500 }
      headerHeight={ 30 }
      rowHeight={ 30 }
      rowCount={ props.list.length }
      rowGetter={ ({ index }) => props.list[index] }
    >
      <Column
        width={ 250 }
        dataKey={ 'id' }
        headerRenderer={ ({ dataKey }) => 'Id' }
      />
      <Column
        width={ 250 }
        dataKey={ 'title' }
        headerRenderer={ ({ dataKey }) => 'Title' }
      />
    </Table>
  );
}

这是结果：

我确定我一定遗漏了什么，我遗漏了什么，为什么它没有显示为表格？

我有一个使用 react-virtualized AutoSizer 的组件，在这个组件里面有一个 react-virtualized List。它的呈现方式是：

<AutoSizer>
  {({width, height}) => (
    <List ref={(ref) => (this.refVirtualizedList = ref)}
      width={width}
      height={height}
      playlistLoading={playlistLoading}
      playlistPlayingTrackId={playlistPlayingTrackId}
      rowCount={rowCount}
      deferredMeasurementCache={this.cellMeasurerCache}
      overscanRowCount={12}
      scrollToIndex={trackGroupToGo - 1}
      scrollToAlignment="center"
      rowHeight={this.cellMeasurerCache.rowHeight}
      updateTrackListFlag={updateTrackListFlag}
      noRowsRenderer={this.renderNoRowsResult}
      rowRenderer={this.renderTrackGroupRow}
      onRowsRendered={this.handleOnRowsRendered} />
  )}
</AutoSizer>

它工作得很好，但它不适用于测试。我看不到列表中的任何内容，并且rowRenderer从未调用过该函数。我正在使用 Jest 和 React 测试库。当使用该logDOM方法检查组件内部的内容时，我看到的是：

<div
  aria-label="grid"
  aria-readonly="true"
  class="ReactVirtualized__Grid ReactVirtualized__List"
  role="grid"
  style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: auto;"
  tabindex="0"
/>

List 组件永远不会呈现。有任何想法吗？

如何以不同于正常的reactJs反应虚拟化 有人可以举例说明一下吗？

提前致谢。

react-virtualizationized中的文档不清楚如何处理行选择.我需要:

• 跟踪选定的行
• 突出显示所选行
• 查询选择了哪一行(我关心获取其数据)

似乎有一种方法可以处理行单击事件并按行更改样式类.我假设我必须根据这些参数滚动自己的选择跟踪.我希望我错了,有更好的方法.

比你

我正在尝试在反应虚拟化中绑定 AutoSizer 和 Masonry 组件。我的项目列表处于 state 状态并异步出现在 componentDidMount() 中。如果我使用简单的匿名箭头函数来渲染 Masonry，则一切正常。但是如果我使用像“renderMasonry”这样的单独函数，我会得到一个空的结果，直到我调整窗口大小并触发重新渲染。我不明白为什么 AutoSizer 在这种情况下没有重新渲染。Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP

我正在使用带有 CellMeasurer 的 react-virtualized WindowScroller 来滚动 100 个样本记录，并且它本身效果很好。

现在，当我将此组件放置在其上方和下方具有冻结页眉和页脚（使用 flex）的内容窗格中时，react-virtualized 不会引入除第一页之外的其他数据。

我的容器页面的结构与 create-react-app 模板相同：

<div className="App">
    <div className="App-header" />
    <div className="App-intro" />
    <div className="App-footer" />
</div>

这是我用来冻结页眉和页脚的 CSS：

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.App {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.App-header, .App-footer {
    flex-shrink: 0;
}
.App-intro {
    flex-grow: 1;
    overflow-y: auto;
}

FWIW，官方的 WindowScroller 示例使用 flex 完成了一个冻结的标题，但尽我所能，我无法复制它。

在花了一整天的时间之后，我的智慧已经结束了。我真的很感激任何让这个 flex 布局与功能性窗口滚动条一起使用的指针。

尝试 scrollToIndex 时，屏幕变为空白。

这是一个重现问题的代码沙盒。只需在顶部的输入框中输入 100，然后单击“滚动到行”按钮。 https://codesandbox.io/s/zr2r2wp1x

这是一个有点复杂的视图 - 它使用 InfiniteLoader、WindowScroller、Autosizer、CellMeasurer、CellMeasurerCache 和 List。

这是代码：

import React, { Component } from 'react';
import {
  AutoSizer,
  CellMeasurer,
  CellMeasurerCache,
  InfiniteLoader,
  List,
  WindowScroller
} from 'react-virtualized';


const cache = new CellMeasurerCache({
  fixedWidth: true,
  defaultHeight: 100
});

class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollToIndex: undefined
    }
    this.list = [];
    this.makeList = this.makeList.bind(this);
    this.makeList();
    this.handleClick = this.handleClick.bind(this);
  }

  makeList() {
    for (let i = 0; i < 200; i++) {
      this.list.push("yo");
    } …

我有一个包含 300 多个项目的大列表。为了获得更好的性能，我想使用 react-virtualized 并且只在屏幕上呈现当前可见的项目。出于设计原因，我必须使用 WindowScroller，并且根据屏幕尺寸，列表具有不同的宽度。

因此我使用 WindowScroller 和 Autosizer。我可以向下滚动 70 个项目的整个列表，但它会在 30 个列表项目（在我开始滚动之前就在那里）后停止渲染。呈现的项目数量取决于可见空间（通过来自 codeandbox.io 的打开和关闭的控制台进行检查）。

我想我的用法有误，但我不知道我做错了什么。

完整示例：https : //codesandbox.io/s/64lzm266n

我已经在 stackoverflow 和 react-virtualized 的问题页面上进行了搜索，但没有找到解决方案。我希望有人可以帮助我。

我在一个项目中使用Material-UI的Autocomplete 组件。由于我有很多渲染选项，虚拟化将非常有益。所以我从文档中的虚拟化示例开始react-window。一切都很好，但该项目已经依赖于react-virtualized，我想避免添加一个解决类似问题的新项目。因此，基于react-window示例，我尝试使用Listfrom重新实现它react-virtualized。

代码示例

https://codesandbox.io/s/sleepy-hypatia-igog8?fontsize=14&hidenavigation=1&module=%2Fsrc%2FVirtualizedAutocomplete.js&theme=dark

问题

如上面的沙箱所示，它有点工作。什么不工作是键盘导航。您可以使用键盘导航，但是Listbox当您导航到可见元素之外时， 不会滚动到突出显示的值。

我试过的：

• 重写onKeyDown的Autocomplete组件。然而，这完全覆盖了 keydown 功能，需要我重新实现它。
• 使用onKeyUp保持onKeyDown功能，并与发现的元素data-focus的属性，然后使用scrollToIndex所述上List部件。这适用于某些情况，但如果用户按住键一段时间并最终出现在过扫描渲染项目之外的索引上，它就会中断。

有没有人有好的方法react-virtualized来虚拟化 Material-UI Autoselect 组件中的选项？我应该使用其他东西List吗？

我最后的办法是使用useAutocomplete钩子并重新实现渲染逻辑，但由于我只是在虚拟化之后，我想尽可能避免这种情况。