标签: react-virtualized

是否可以将反应虚拟化和酶一起使用？当我尝试一起使用它们时,我似乎在网格中得到一个空列表.

我试图InfiniteLoader从react-virtualize库中使用来显示textSearch顶部有一个输入字段的可滚动列表（用于过滤列表条目）。

我使用的代码与InfiniteLoader Sample Code非常接近。该列表工作正常，但我不确定如何InfiniteLoader在searchText更改时重置/初始化并显示（完全）新数据。

流程是这样的：

1. 该列表是第一次打开并显示来自redux store（工作正常）的数据。
2. 用户更改textSearch和新数据被提取到store
3. 在这一点上，InfiniteLoader应该进行初始化（我打过电话resetLoadMoreRowsCache上InfiniteLoader）
4. InfiniteLoader应该loadMoreRows第一次调用like 并使用新数据重新渲染

我已经看到INFINITELOADER DEMO具有相同的行为：通过单击“刷新缓存数据”，在我开始整理列表之前没有任何反应。

所以我的问题是：重置/初始化的正确方法是什么？

我一直在努力使此反应虚拟表示例正常工作，并开始严重怀疑我的理智。我已经创建了一个React应用，而我只是想在App.js中渲染示例表：

class App extends Component {
    render() {
        var data = [1,2,3,4,5,6,7,8,9,10];
        return (
            <TableExample
                list={data}
            />
        );
    }
}

React一直在说list未定义-显然我没有以正确的方式将数据输入组件。我还无法理解示例代码，需要传递哪些道具以及应命名的道具。很抱歉这个愚蠢的问题，但我永远被困在不知道还能从哪里找到答案的问题。表格示例代码如下：

/** @flow */
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import * as React from 'react';
import {
  ContentBox,
  ContentBoxHeader,
  ContentBoxParagraph,
} from '../demo/ContentBox';
import {LabeledInput, InputRow} from '../demo/LabeledInput';
import AutoSizer from '../AutoSizer';
import Column from './Column';
import Table from './Table';
import SortDirection from './SortDirection';
import SortIndicator from './SortIndicator';
import styles from './Table.example.css';

export …

我正在尝试使用react-virtualized渲染具有1000多行数据的表。这些行非常重，包含多个复杂的React组件。输入，组合框，日期选择器和弹出菜单全部排在一行中。我需要整个窗口来滚动这些行。

我还需要对行进行分组并将其嵌套到显示/隐藏样式的手风琴组件中。

[+] Row Header 1
    row 1
    row 2
    ...
    row 1001
[+] Row Header 2
    row 1
    row 2
    ...
    row 1001

我不确定如何处理该用例，或者不确定React-Virtualized是否可以处理此类事情。

我尝试过的

结合使用WindowScroller / AutoSizer / List组件，并将这组虚拟化组件放入每个手风琴中。这有效，但不能解决我的问题。问题，因为浏览器仍然无法处理（首次加载大约需要25秒，并且无法滚动）

我是否还需要使用WindowScroller / AutoSizer / List组件来处理行标题的第一级？

任何想法或例子将不胜感激。

在docs - headerRowRenderer中,但任何人都可以与一些自定义标头标记共享简单示例,例如使用自定义titleattr +所有"默认"虚拟化功能,例如可排序...

我正在使用 React-Virtualized 创建一个延迟加载无限列表。

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md

但是，我无法在渲染的 div 之间创建间隙，因为它们是绝对定位的并且顶部是动态计算的。

我尝试过以下方法，但没有运气。关于如何在每个元素之间添加这种间隙有什么想法吗？谢谢！

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

我正在尝试使用react-virtualized来虚拟化一个列表，其中某些行具有不同的高度，并且该列表占据了父级中的所有空间。我正在尝试使用 CellMeasurer、AutoSizer 和 List 组件来完成此任务。

我的包版本如下：

react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"

import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';


class Table extends PureComponent {

  rowRenderer = ({ index, style, key }) => {
    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >
        <div style={style} key={key}>
          content
        </div>
      </CellMeasurer>
    );
  }

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

  renderAutoSizerContent = () => {
    return this.RenderList; …

有人可以看一下我的吗react-virtualized设置吗？我确信它的设计不正确，因为单元高度没有正确测量。

https://gist.github.com/zackster/31fb5a983a33b303626cd8ae9dee3b94

我是 React.js 的新手（这是我在 React 中的第一个项目，所以一些糟糕的设计可能归因于此）。我将测量值​​传递到 ChatHistoryCell 中，后者将其传递到各个子组件中，这些子组件不可避免地会在各自的 componentDidMount 事件上调用它。

我对此基本上有三个主要错误。

1. 我希望它在第一次加载后立即滚动到底部。不知道该怎么做？该组件似乎重新渲染了很多，所以答案可能涉及状态标志？您会注意到当前的要点已this._list.scrollToRow(selectedThread.chat_log.length - 1);包含componentDidUpdate()但不起作用

2. 计算出的行高通常是非常错误的。

3. 如果我调整窗口的宽度，然后调用这些方法：

        selectedConversation.cellMeasurerCache.clearAll();
        selectedConversation.cellMeasurer.resetMeasurements();
        selectedConversation.listRef.recomputeRowHeights();
        selectedConversation.listRef.forceUpdateGrid();

调整大小后，看起来很糟糕。但是，如果我滚动到视图之外，然后返回视图，它看起来不错并调整为新的宽度。

我是反应虚拟化和自动完成的新手。我目前正在构建一个列表，在选择复选框时显示多个文本。这是我的代码：https : //codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx

当从列表中选择任何内容时，我只想显示一个文本，并删除附加的清除按钮和灰色背景。

我有一个小项目，使用justified-layout和react-virtualized，

我将width和height与Ref 一起preview images设置。( 在组件 [( ) ] 中，)useCallbackpreviewImageContainerRef<PreviewImage><Results> / <PreviewImgRow> / <PreviewImage>components > albums > results > preview_image.jsref={previewImageContainerRef} is in preview_image.js as well, located on <div> with className="c-flex-center picture-frame-wrapper"

\xc2\xa0 \xc2\xa0 // useCallback > Ref : previewImageContainerRef\n\xc2\xa0 \xc2\xa0 const previewImageContainerRef = useCallback(node => {\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 if (node !== null) {\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 // Set > Preview …