标签: react-virtualized

我目前有一个项目列表，例如<ul><li/><li/>...</ul>，每个项目的样式都是display: inline-block。这些项目不是固定的高度或宽度，尽管我可能可以将它们固定，并且每个项目都包含缩略图，有时还包含文本。

随着窗口宽度的变化，列表会相应地换行，没有水平滚动条。例如，列表可能以 3 个项目开始，它们全部水平排列在窗口内的一行上：

| 1 2 3     |

然后添加更多项目，并且这些项目开始换行到第二行：

| 1 2 3 4 5 |
| 6 7 8     |

然后，如果窗口宽度发生变化，项目将重新换行：

| 1 2 3 4 5 6 7 |
| 8             |

当有数千个项目时，性能肯定会受到影响，所以我想看看是否有一种方法可以虚拟化列表。从我阅读的文档来看，React Virtualized 库目前似乎不支持此功能，但我想检查一下。该Collection组件看起来可能很接近，但我认为它不会随着窗口大小的调整而动态改变宽度或高度。

如果这种项目包装是可能的，是否有任何示例实现？

我正在使用“react-virtualized”来创建一个表。在该表中，某些数据可能会显示为'<b>Brian Vaughn1</b>'。该表格单元格应该font-weight: bold仅呈现文本，不带标签。像这样：

我已经设法通过使用来解决这个问题ReactDOM.findDOMNode（据我所知应该避免使用），但我认为应该有一个更好、更干净的方法来做到这一点。这是我的代码：

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

import './chart-table.scss';

class ChartRTable extends Component{
  constructor(props){
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }


  getColumns(data){
   const columnsNumber = data.namesForColumns.length;
    const columnWidth = this.props.tableWidth / columnsNumber;
    let namesForColumns = ['name', 'description'];
    return namesForColumns.map( name => {
      return (
        <Column
          label={name}
          dataKey={name}
          width={columnWidth}
        />
      )
    })
  }


  handleScroll(){
    // not a very nice way to make use of <b> tags …

反应虚拟化项目使我能够有效地呈现非常大的组件列表.在我的项目中,列表项是容器组件,即连接到redux存储的组件.他们只知道他们的ID,容器组件负责获取所有相关数据,例如正文,日期,用户名等.

我面临的问题是计算这些组件的高度.React-virtualized有一个CellMeasurer组件用于计算动态高度,但CellMeasurer测量组件默认状态的高度,在我的容器组件中为0,因为容器组件在呈现第一个时尚未获取数据时间.

有没有办法在容器加载内容时强制重新计算组件高度？

我正在使用react-virtualized，并尝试使用该scrollToIndex功能，但是使用该功能时我得到了一个空白列表。（如果滚动，则列表再次显示）。

这是我的代码：

        <WindowScroller>
        {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
                {({ width }) => (
                    <List
                        autoHeight
                        height={height}
                        rowCount={lines.length}
                        rowRenderer={({ index, key, style }) => rowRenderer({ index, isScrolling, key, style, lines, onDelete, toggle })}
                        rowHeight={145}
                        scrollTop={scrollTop}
                        scrollToIndex={100}
                        width={width}
                    />
                    )}
            </AutoSizer>
            )}
    </WindowScroller>

如果我删除 scrollToIndex={100}，一切正常。

请问scrollToIndex作品用WindowScroller？因为我只发现了List

我正在对数据表使用react-virtualized，但遇到了这个问题。我的目标是将onClick方法附加到单元格上。

我renderColumns里面有功能<Table>

<AutoSizer disableHeight>
  {({ width }) => (
    <Table
       width={800}
       height={600}
       headerHeight={25}
       rowHeight={30}
       rowCount={list.length}
       rowGetter={({ index }) => list[index]}
    >
       {this._renderColumns(list, 100)}

    </Table>
  )}
</AutoSizer>

在renderColumns功能上，我称this._cellRenderer

_renderColumns(list, columnWidth) {
// create new list for display
return list && Object.keys(list[0])
  ? Object.keys(list[0]).map(column => (
      <Column
        key={column}
        width={columnWidth}
        label={column}
        dataKey={column}
        cellRenderer={this._cellRenderer}
      />
    ))
  : <div className="loading">Loading…</div>;

}

然后在_cellRenderer，席力图召_onCellClick的onClick事件。

_onCellClick() {
  alert('yey');
}

_cellRenderer({
  cellData,
  columnData,
  columnIndex,
  dataKey, …

每个人。我正在研究react-virtuoso。它是一个用于高效渲染大型组件列表的新存储库。这是相当新的。我对它是如何工作的感到困惑。为什么react virtuoso可以克服react-virtuoso的问题？

非常感谢<3。

我正在使用来自'react-virtualized'的表.

我收到一些我希望在自定义行中显示的嵌套数据.我的问题是将嵌套的json绑定到我的Column dataKey.

    data= 
  {
    name:'Chris',
    age:'15',
    adresse : {
       number:'14',
       street: 'xxx'
               } 
   }

我的专栏

<Column dataKey="name"    [....] />
<Column dataKey="age" [...] />
<Column dataKey=" ??????" />  // adresse.number ? 

谢谢

是否有任何软件包/库/ etc我只能导入我需要的react-virtualizationized部分？对于lodash,有点像https://www.npmjs.com/package/lodash.debounce吗？