使用 InfiniteLoader、Table、Column、AutoSizer 和 CellMeasurer 构建响应式无限滚动表

Question

我刚刚使用 InfiniteLoader、Table、Column 和 AutoSizer 完成了一个工作表，我意识到该表不会随浏览器窗口水平缩放。尽管图书馆的大部分内容都有很好的记录，但我花了很长时间才完成这项工作。我想要实现的是一个类似 HTML 的表格，它根据浏览器窗口的宽度调整大小，随着内容的换行垂直增加行高，并使用具有不同行高的无限负载。反应虚拟化是否可以实现所有这些点？似乎最好先问一下，因为组合这个库的所有移动部分可能会很棘手。谢谢！

这是我的组件：

import React from 'react';
import fetch from 'isomorphic-fetch';
import { InfiniteLoader, Table, Column, AutoSizer } from 'react-virtualized';
import { connect } from 'react-redux';
import { CSSTransitionGroup } from 'react-transition-group';
import { fetchProspects } from '../actions/prospects';
import Footer from './footer';

class ProspectsTable extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.renderProspects = this.renderProspects.bind(this);
    this.isRowLoaded = this.isRowLoaded.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
    this.state = {
      remoteRowCount: 200,
      list: [
        {
          fullName: '1 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
        {
          fullName: '2 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
        {
          fullName: '3 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
      ],
    };
  }

  isRowLoaded({ index }) {
    return !!this.state.list[index];
  }

  loadMoreRows({ startIndex, stopIndex }) {
    return fetch(`http://localhost:5001/api/prospects?startIndex=${startIndex}&stopIndex=${stopIndex}`)
      .then((response) => {
        console.log('hi', response);
        console.log('hi', this.props);
      });
  }

  rowRenderer({ key, index, style }) {
    return (
      <div
        key={key}
        style={style}
      >
        {this.state.list[index]}
      </div>
    );
  }

  render() {
    return (
            <InfiniteLoader
              isRowLoaded={this.isRowLoaded}
              loadMoreRows={this.loadMoreRows}
              rowCount={this.state.remoteRowCount}
            >
              {({ onRowsRendered, registerChild }) => (
                <div>
                  <AutoSizer>
                    {({ width }) => (
                      <Table
                        ref={registerChild}
                        onRowsRendered={onRowsRendered}
                        width={width}
                        height={300}
                        headerHeight={20}
                        rowHeight={30}
                        rowCount={this.state.list.length}
                        rowGetter={({ index }) => this.state.list[index]}
                      >
                        <Column
                          label="Full Name"
                          dataKey="fullName"
                          width={width / 6}
                        />
                        <Column
                          width={width / 6}
                          label="Email"
                          dataKey="email"
                        />
                        <Column
                          width={width / 6}
                          label="Phone"
                          dataKey="phone"
                        />
                        <Column
                          width={width / 6}
                          label="Program of Interest"
                          dataKey="programOfInterest"
                        />
                        <Column
                          width={width / 6}
                          label="Status"
                          dataKey="status"
                        />
                        <Column
                          width={width / 6}
                          label="Date Created"
                          dataKey="dateCreated"
                        />
                      </Table>
                    )}
                  </AutoSizer>
                </div>
              )}
            </InfiniteLoader>
      );
    }
  }
}

const mapStateToProps = state => ({
  prospects: state.prospects,
});

export default connect(mapStateToProps)(ProspectsTable);

这是一个与我的代码非常相似的 plnkr，我经常引用它：https://plnkr.co/edit/lwiMkw?p=preview

Answer 1

到目前为止，在一个雄心勃勃的项目上做得很好。关于实现剩余目标的一些想法：

1. 根据浏览器窗口的宽度调整大小

   尝试将您的AutoSizer 组件放在此层次结构的顶层，并确保其父组件的宽度随视口而变化。这可以像父 div 和 width: 100vw 一样简单地实现。

2. 在内容换行时垂直增加行高，并使用具有不同行高的无限负载

   这些都可以通过根据数据动态设置行高来实现。来自 rowHeight 属性上的 docs Table：

   可以是固定的行高（数字），也可以是根据给定索引返回行高的函数：({ index: number }): number

   React-Virtualized 通过提前计算其尺寸来发挥它的魔力，因此您将无法让flex-wrap 功能或其他基于 CSS 的解决方案正常工作。相反，确定如何使用给定行的数据（可能还有当前屏幕尺寸）来计算该行的高度。例如：

   const BASE_ROW_HEIGHT = 30;
   const MAX_NAME_CHARS_PER_LINE = 20;
   
   ...
   
     getRowHeight = ({ index }) => {
       const data = this.state.list[index];
   
       // Not a great example, but you get the idea;
       // use some facet of the data to tell you how
       // the height should be manipulated
       const numLines = Math.ceil(fullName.length / MAX_NAME_CHARS_PER_LINE);
   
       return numLines * BASE_ROW_HEIGHT;
     };
   
     render() {
       ...
   
       <Table
         ...
         rowHeight={this.getRowHeight}
       >      
     }
   

作为更多参考，我发现React-Virtualized Table example 的源代码信息量很大——尤其是关于动态设置行高的行：

_getRowHeight({ index }) {
  const { list } = this.context;

  return this._getDatum(list, index).size;
}

祝你好运！