标签: react-virtualized

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

我有一个组件如下:

import { List } from 'react-virtualized';
<List
    height={400}
    rowCount={_.size(messages)}
    rowHeight={(index) => {
        return 100; // This needs to measure the dom.
    }}
    rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}}
    width={300}
/>

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

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

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

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

我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,项目需要展开并推送下面的项目:https: //plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii

用例类似于facebook帖子,当有人评论它会扩展帖子并推动其他帖子更低.

ReactDOM.render(
<List
className='List'
autoHeight
width={300}
height={400}
rowCount={list.length}
rowHeight={30}
rowRenderer={
  ({ index, isScrolling, key, style }) => (
    <div
      className='Row'
      key={key}
      style={style}
    >
      {list[index]}
      <Expander />  /* contains the button, which when click it will expand more text*/
    </div>
  )
}
/>,
document.getElementById('example')

有没有办法实现这个目标？

UPDATE

我意识到必须有一种方法来强制List更新项目并重新计算位置.有一个例子InfiniteLoader(反应虚拟化示例),它registerChild在List中用作ref.似乎当InfiniteLoader从服务器收到答案时,它能够强制列表重新呈现行.

我已尝试使用forceUpdate列表中的另一个示例,但List仍未更新.

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

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

如何在两个方向上,向上和向下进行无限滚动.我使用的是InfiniteLoader和List,两者都是反应虚拟化的组件.我有一个带有初始日期时间范围的时间戳列表.从那里列表应该在两个方向上是无限的.目前,向下滚动到List的底部将触发函数_loadMoreRows().但是,我想在向上滚动时触发具有相同功能的_loadMoreRows().

我正在使用 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();

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

我有一个小项目，使用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 …

我正在尝试使用Github上的表排序演示将排序添加到我的项目中。

我的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';

import 'react-virtualized/styles.css';

class NewTable extends React.Component {
  constructor(props) {
    super(props);

    this.dataList = props.list;

    this.state = {
      headerHeight: 50,
      rowHeight: 25,
      rowCount: this.dataList.length,
      height: 400,
      sortBy: 'columnone',
      sortDirection: SortDirection.ASC,
    };

    this.headerRenderer = this.headerRenderer.bind(this);
    this.sort = this.sort.bind(this);
  }

  isSortEnabled() {
    const list = this.dataList;
    const rowCount = this.state;

    return rowCount <= list.length;
  }

  sort({ sortBy, sortDirection }) …

我有一个“卡片”组件，它以设定的方式呈现对象的数据。

这些卡组件具有预定义的宽度和高度。

这些卡片组件将显示在列表中，我希望该列表能够利用可用的水平空间。

我希望列数能够响应地改变。例如，如果父组件对于 3 列来说变得太窄，那么它应该改为使用 2 列。

从概念上讲，这是相当容易实现的。组件尺寸是众所周知的，因此不需要即时尺寸测量，并且计算适合列表宽度的组件数量也很简单，列表宽度给出了列数。

甚至可以选择使用它display:flex并让它为您进行计算和布局。

我目前正在尝试使用它react-virtualized来实现此响应式列列表，因为我们已经在应用程序的其他情况下使用它。它对虚拟化的支持也是一个强大的吸引力。

砖石布局似乎提供了我们想要的，但我“无法让它工作”。

它需要一个CellMeasurerCache固定宽度或固定高度。不幸的是，因为我的组件具有固定的宽度和高度，因此不需要进行测量。

我使用了 afixedWidth作为CellMeasurerCachethe 的cellPositioner要求columnWidth，并且我认为最好让它认为不需要更改。

这是我的代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RouteComponentProps } from 'react-router-dom';
import { AutoSizer, Masonry, WindowScroller, CellMeasurer, CellMeasurerCache, MasonryCellProps, createMasonryCellPositioner } from 'react-virtualized';
import { Task } from '../../store/tasks';
import { TaskCard } from './taskcard';

type TaskCardListProps = {
    scrollElement?: …